title: Make images in <canvas> move with javascript keyboard input?
body: <p>I've been trying to do something that seems like it should be really simple, but I've been hitting a wall. I want to write javascript code which takes a image that has been drawn inside the the canvas tag and moves it via keyboard input. When I press the right arrow key, I want the image to move right. When I press the left arrow key, I want the image to move left. I want it to keep moving until I release the key, I'm not interested in something that just slides over a bit with each key press. Here is what I've come up with so far:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body onload="load_image()"&gt;
  
  &lt;canvas id="myCanvas" width="320" height="240" style="border:1px solid #000000;"&gt;
  &lt;img id="testpic" src="testpic.png"&gt;
  &lt;/canvas&gt;
  
  &lt;script&gt;
  function load_image() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("testpic");
  ctx.drawImage(img,10,10);}
  
  document.addEventListener('keydown', function(event) {
      if (event.keyCode == 37) {
  // CODE THAT STARTS LEFT IMAGE MOVEMENT GOES HERE.
      }
      else if (event.keyCode == 39) {
  // CODE THAT STARTS RIGHT IMAGE MOVEMENT GOES HERE.
      }
  }, true);
  
  document.addEventListener('keyup', function(event) {
      if (event.keyCode == 37) {
  // CODE THAT STOPS LEFT IMAGE MOVEMENT GOES HERE.
      }
      else if (event.keyCode == 39) {
  // CODE THAT STOPS RIGHT IMAGE MOVEMENT GOES HERE.
      }
  }, true);
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've been trying examples from several websites, but none of them work. The best I can do is redraw the image over and over with key presses, which will not work for me. Any tips or guidance would be greatly appreciated. If you present me with working code, I will love you!</p>