title: How to move object with keyboard in javascript
body: <p>When I move the object, it's slow and doesn't move in diagonal, only up, down, right and left.</p>
  
  <p>How can I fix this, is this a good way to start or should I do it otherwise?</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext('2d');
  canvas.width = 600;
  canvas.height = 600;
  var object = {
      height: 40,
      width: 40,
      x: 10,
      y: 10, 
      color: "#FF0000"        
  }
  
  document.addEventListener('keydown', function(event) {
      //left
      if(event.keyCode == 37) {
          object.x -= 1;
      }
      //top
      else if(event.keyCode == 38) {
          object.y -= 1;
      }
      //right
      else if(event.keyCode == 39) {
          object.x += 1;
      }
      //bottom
      else if(event.keyCode == 40) {
          object.y += 1;
      }
  });
  
  function renderCanvas(){
      ctx.fillStyle = "#000000";
      ctx.fillRect(0, 0, 600, 600);
  } 
  function renderObject(){
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(object.x, object.y, object.width, object.height);
  }
  function run(){
      renderCanvas();
      renderObject();
  }
  
  setInterval(run, 10);
  </code></pre>
  
  <p>Here's a <a href="http://jsfiddle.net/gabs/paw4X/" rel="noreferrer">jsfiddle</a></p>
  
  <p>I'm kind of a newbie in javascript and I really need help on this ;)</p>