javascript - キャンバス内で四角形を移動する

Question

私のコード:

 $(document).ready(function () {

    var canvas,
    ctx,
    playerimage,
    x,
    y,
    speed = 5, //speed for the player to move at
    width = 10, //width of the player
    height = 10; //height of the player

    function init() {
        canvas = $("#Mycanvas");
        ctx = canvas[0].getContext('2d');
        x = canvas.width() / 2;
        y = canvas.height() / 2;

         playerimage = new Image();
         playerimage.src = "ninja.png"; //path to the image to use for the player
         window.addEventListener("keydown", update, false);
        //canvas.addEventListener("keypress", update);
         render();
    }

    $(window).load(function () { init(); });

    function update(event) {
        if (event.keyCode == 38) {
            y -= speed; //going up
        }
        if (event.keyCode == 40) {
            y += speed; //going down
        }
        if (event.keyCode == 37) {
            x -= speed; //going left
        }
        if (event.keyCode == 39) {
            x += speed; //going right
        }
        render();
    }

    function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(x, y, width, height);


    }
});

私のjsfiddle：http://jsfiddle.net/BLpGH/14/

あなたが見ることができるように、四角形が動いていないのではなく、動くのではなく線を描いているように見えます。