Canvas How to - Use arrow key to control image on Canvas

Question

We would like to know how to use arrow key to control image on Canvas.

Answer


<!--  w w  w.j  a  v a  2s. co  m-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <canvas id="myCanvas" width="1050" height="620">
<script>
var canvas;
var ctx;
var car = new Image();
var x = 0;
var y = 0;
window.onload=startUp;
function startUp() {
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');
    loadImages();
    startGameLoop();
}
function startGameLoop() {
    setInterval(function () {
        drawScreen();
        drawCar();
    }, 16);
    window.addEventListener('keydown', whatKey, true);
}
function drawScreen() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#aaaaaa';
    ctx.rect(0, 0, canvas.width, canvas.height);
    ctx.fill();
}
function drawCar() {
    ctx.drawImage(car, x, y, 200, 103);
}
function whatKey(evt) {
    switch (evt.keyCode) {
        // Left arrow.
        case 37:
            {
                x -= 15;
            }
            break;
            // Right arrow.
        case 39:
            {
                x += 15;
            }
            break;
            // Down arrow
        case 40:
            {
                y += 15;
            }
            break;
            // Up arrow
        case 38:
            {
                y -= 15;
            }
            break;
    }
    evt.stopPropagation();
  evt.preventDefault();
}
function loadImages() {
    car.src = 'http://www.java2s.com/style/download.png';
}
</script>

</body>
</html>

The code above is rendered as follows: