HTML+JS Canvas Example

by Edward

HTML

<canvas height='320' width='480' id='canvas'>Обновите браузер</canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 10;
var y = 100;

function init(x, y) {
    context.clearRect(0, 0, 320, 480);
    context.fillStyle = '#000000';
    context.fillRect(x, y, 20, 20);
    context.save();
}

function key(event) {
    if (event.keyCode == 39 || event.keyCode == 54) {
        x++;
        init(x, y);
    }
    if (event.keyCode == 37 || event.keyCode == 52) {
        x--;
        init(x, y);
    }
}
document.onkeydown = key;
init(x, y);