Untitled

<!DOCTYPE html>
<html>
<head lang="en">
</head>


<body>
<canvas id="canvas1" width="400" height="400"></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        var canvas = $("#canvas1")[0];
        var context = canvas.getContext("2d");
        var height = $("#canvas1").height();
        var width = $("#canvas1").width();
        var scale = 20;
        var nx,ny;


        function paint(x, y) {
                //фон
                context.fillStyle = "grey";
                context.fillRect(0, 0, width, height);

                //квадрат
                context.fillStyle = "blue";
                context.fillRect(x * scale, y * scale, scale, scale);
                nx = x;
                ny = y;
        }

        paint(1, 1);

        $(document).keydown(function (e){
                var key = e.which;
                if (key == "39") {
                    nx++;
                } else if (key == "37") {
                    nx--;
                }
                else if (key == "40") {
                    ny++;
                }
                else if (key == "38") {
                    ny--;
                }
            if (Math.abs(nx) * scale < width && Math.abs(ny) * scale < height) {
                paint(nx, ny);
            }
        })
    });
</script>
</body>
</html>