title: Why is my keyboard input in javascript not working?
body: <p>I am trying to move an image in canvas based on arrow keys pressed by the user, but the image stays still without moving even if I press the arrow keys. Here is my html code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Keyboard Animation Demo&lt;/title&gt;
          &lt;meta  charset="UTF-8"/&gt;
          &lt;style type="text/css"&gt;
              .hidden{
                  display: none;
              }
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
              var drawing;
              var con;
              var gokupic;
              CANV_HEIGHT = 200;
              CANV_WIDTH = 200;
              SPR_HEIGHT = 50;
              SPR_WIDTH = 40;
              var x = 0;
              var y = 0;
              var dx = 10;
              var dy = 7;
              var currentKey;
  
              function init(){
                  drawing = document.getElementById("drawing");
                  con = drawing.getContext("2d");
                  gokupic = document.getElementById("goku");
                  document.onkeydown = updateKeys;
                  setInterval(draw, 100);
              }
  
              function updateKeys(e){
                  currentKey = e.keyCode;
  
                  if(currentKey == K_LEFT){
                      dx = -5;
                  }
                  if(currentKey == K_RIGHT){
                      dx = 5;
                  }
                  if(currentKey == K_TOP){
                      dy = -5;
                  }
                  if(currentKey == K_DOWN){
                      dy = 5;
                  }
                  if(currentKey == K_SPACE){
                      dx = 0;
                      dy = 0;
                  }
              }//end updateKeys
  
              function draw(){
                  //clear bg
                  con.clearRect(0,0,200,200);
  
                  currentKey = null;
  
                  //move the element
                  x += dx;
                  y += dy;
  
                  //check for boundaries
                  wrap();
  
                  //draw the image
                  con.drawImage(gokupic, x,y,SPR_WIDTH, SPR_HEIGHT);
  
                  //draw a rectangle
                  con.strokeStyle = "red";
                  con.lineWidth = 5;
                  con.strokeRect(0,0,CANV_WIDTH,CANV_HEIGHT);
              }//end draw
  
              function wrap(){
                  if(x &gt; CANV_WIDTH){
                      x = 0;
                  }
                  if(x &lt; CANV_WIDTH){
                      x = 0;
                  }
                  if(y &gt; CANV_HEIGHT){
                      y = 0;
                  }
                  if(y &lt; CANV_HEIGHT){
                      y = 0;
                  }
              }//end wrap
  
              //keyboard constans
              K_LEFT = 37; K_RIGHT = 39; K_UP = 39; K_DOWN = 40; K_SPACE = 32;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload = "init()"&gt;
          &lt;h1&gt;Keyboard Motion&lt;/h1&gt;
          &lt;img class = "hidden" id = "goku" src = "goku.jpg" alt = "goku pic" /&gt;
          &lt;canvas id = "drawing" height=200 width=200&gt;Canvas not supported&lt;/canvas&gt;
          &lt;p&gt;Use arrow keys to move image, space bar to stop the motion.&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks</p>
  
  <p>Note: I have no problems with the image itself, I assume I am doing some trivial mistake somewhere inside script tag due to my inexperience with javascript, so I need your help. </p>