title: Getting a canvas element to move while holding down a key then stop when letting go
body: <p><a href="http://jsfiddle.net/genome314/4Hm8X/" rel="nofollow">http://jsfiddle.net/genome314/4Hm8X/</a></p>
  
  <p><strong>Problem with code:</strong> If you hold down an arrow key and look at the console - the keyup is firing after every keydown. Additionally the object stops moving after holding down the arrow keys.</p>
  
  <p><strong>Why this is a problem in this context:</strong> I want the square to move every time the arrow keydown is fired, then for it to stop when keyup is fired. </p>
  
  <p><strong>Desired effect</strong>: I want to hold down a key to move the box, then for it to stop moving when I let go of the key.</p>
  
  <ul>
  <li>Is this achievable? If so, approximately how? If not, is there an alternative method for registering the direction?</li>
  </ul>
  
  <p>For the record I don't want to use Jquery. Thanks for any tips or suggestions.</p>
  
  <p>Javascript</p>
  
  <pre><code>keyLeft = 0;
  keyRight = 0;
  keyNorth = 0;
  keyBot = 0;
  var interval;
  var c = 0;
  
  window.onload=function(){
      addButton.addEventListener
          ('click',function(){addRowCell("table1")},false);
      removeButton.addEventListener
          ('click',function(){deleteRowCell("table1")},false);
      stopButton.addEventListener('click',stop,false);
      startButton.addEventListener('click',initiate,false);
  }
  //38 up
  //37 left
  //40 down
  //39 right
  document.onkeydown = function (e) {
  
      console.debug(e.keyCode, "down");
      console.debug(e.keyCode, "up");
  
      switch (e.keyCode){
          case 37:
              initiateLeft();
              break;
          case 38:
              initiateNorth();
              break;
          case 40:
              initiateBot();
              break;
          case 39:
              initiateRight();
              break;
          case 32:
              stop();
              break;
      }
  }
  
  function stop(){
      clearInterval(interval);
  }
  function initiateRight(){
      clearInterval(interval);
      interval = setInterval(right,100);
  }
  function initiateLeft(){
      clearInterval(interval);
      interval = setInterval(left,100);
  }
  function initiateNorth(){
      clearInterval(interval);
      c=0;
      interval = setInterval(north,100);
  }
  function initiateBot(){
      clearInterval(interval);
      interval = setInterval(bot,100);
  }
  
  function right(){
      var x = document.getElementById("counter");
      x.value = keyRight;
      var d = document.getElementById("canv1");
      var ctx = d.getContext("2d");
      var ctx1 = document.querySelector('#canv1').getContext('2d');
      ctx1.clearRect(0,0,100,100);    
      ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
      keyRight++;
  }
  function left(){
      var x = document.getElementById("counter");
      x.value = keyLeft;
      var d = document.getElementById("canv1");
      var ctx = d.getContext("2d");
      var ctx1 = document.querySelector('#canv1').getContext('2d');
      ctx1.clearRect(0,0,100,100);
      ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
      keyLeft++;
  }
  function north(){
      var x = document.getElementById("counter");
      x.value = keyNorth;
      var d = document.getElementById("canv1");
      var ctx = d.getContext("2d");
      var ctx1 = document.querySelector('#canv1').getContext('2d');
      ctx1.clearRect(0,0,100,100);
      keyNorth+=(10-c);
      c+=2;
      ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
      if(20-keyNorth == 20)
      clearInterval(interval);
  }
  function bot(){
      var x = document.getElementById("counter");
      x.value = keyBot;
      var d = document.getElementById("canv1");
      var ctx = d.getContext("2d");
      var ctx1 = document.querySelector('#canv1').getContext('2d');
      ctx1.clearRect(0,0,100,100);
      ctx.strokeRect(20+keyRight-keyLeft,20-keyNorth+keyBot,40,40);
      keyBot++;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;canvas id="canv1" width="300px" height="100px"&gt;&lt;/canvas&gt;
  &lt;input id="counter" style="width:40px;"&gt;&lt;/input&gt;
  &lt;div style="clear:left;"&gt;
  Press spacebar to pause.&lt;br&gt;
  </code></pre>