HTMl

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css">
        body{
        background:#000;
        }
        #my_canvas{
        background:#FFF; border:#999 1px solid;
        }
</style>
        <script>
        function initCanvas(){
        var ctx = document.getElementById('my_canvas').getContext('2d');
        ctx.addEventListener("keydown", move, true);

        function move(event){
                //W
                if(event.keyCode == 87){
                        y = y + 20;
                }
                //A
                else if(event.keyCode == 65){
                        x = x - 20;
                }

                //S
                else if(event.keyCode == 83){
                        y = y + 20;
                }

                //D
                else if(event.keyCode == 68){
                        x = x + 20;
                }
        }

        var x = 0;
        var y = 0;

        ctx.fillStyle = "green";
        ctx.fillRect(x + 20, y + 20, 20, 20);

        }

   window.addEventListener('load', function(event){
      initCanvas();
   });
        </script>
</head>
        <body>
                <center>
                        <canvas id="my_canvas" width="500" height="500"> </canvas>
                </center>
        </body>
</html>