Untitled

var key = [];
onkeydown = onkeyup = function(e){
    e = e || event;
    map[e.keyCode] = e.type == 'keydown';
    if (key[65]){ //'a' is pressed
        if (crxpos > 8)
            crxpos-=8;
    }
    else if (key[68]){ //'d' is pressed
        if (crxpos < 1280 - 40)
                crxpos+=8;
    }
    else if (key[83]){ //'s' is pressed
        if (crypos < 720 - 40)
                crypos+=8;
    }
    else if (key[87]){ //'w' is pressed
        if (crypos > 8)
                crypos-=8;
    }
}
var map = document.getElementById("map");
var ctx = map.getContext("2d");
var dt = 1000 / 30.0;

var caverunner = new Image();
caverunner.src = "caverunner.png";
caverunner.addEventListener("load", drawImage);
var crxpos = 1280 / 2 - 4;
var crypos = 720 / 2 - 4;

function drawImage(){
    setInterval(update, dt);
}

function update(){
    ctx.clearRect(0, 0, 1280, 720);
    ctx.drawImage(caverunner, crxpos, crypos);
}

<!DOCTYPE html>
<html>
<style type="text/css" media="all"> @import "canvas.css"; </style>
<body>

<h1>Cave</h1>
<canvas id="map" width="1280" height="720" style="border:1px solid #000000;"></canvas>
<p> </p>
<script src="cave.js"> </script>

</body>
</html>