var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var w = 0;
var a = 0;
var s = 0;
var d = 0;

var x = 0;
var y = 0;

function checkInput() {
    document.onkeydown = function(e) {
        var e = window.event || e

        if (e.keyCode == 87) w = 1;
        else if (e.keyCode == 65) a = 1;
        else if (e.keyCode == 83) s = 1;
        else if (e.keyCode == 68) d = 1;
    }
    document.onkeyup = function(e) {
        var e = window.event || e
        if (e.keyCode == 87) w = 0;
        else if (e.keyCode == 65) a = 0;
        else if (e.keyCode == 83) s = 0;
        else if (e.keyCode == 68) d = 0;
    }
}

function handleInput() {
    if (w == 1) {

        y-=2;
    }
    if (a == 1) {
        x-=2;
    }
    if (d == 1) {
        x+=2;
    }
    if (s == 1) {
        y+=2;
    }
}

function drawRectangle(x, y, size, color) {

    context.beginPath();
    context.rect(x, y, size, size);
    context.fillStyle = color;
    context.fill();

}

function drawBackground(color) {
    context.beginPath();
    context.rect(0, 0, 240, 240);
    context.fillStyle = color;
    context.fill();

}

function Render() {
    drawBackground("Black");
    drawRectangle(x, y, 32, "Red");
}

function Update() {
    checkInput();
    handleInput();
    Render();
}
self.setInterval("Update()",50);