title: how to move an image on canvas html5 with arrow key press?
body: <p>I saw many peps with same question but none of the solution helped me ..so i post the question.
  I want to move my second pic "g_fighter.png" over the background . so i wrote the codes now its draw the images over the canvas but on keypress the pic dont move ! It will be very helpfull if anyone can find the flaw in my code
   `</p>
  
  <pre><code>&lt;html&gt;
  &lt;body onload=start()&gt;
  &lt;center&gt;
  &lt;canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"&gt;Your browser does not support canvas tag.&lt;/canvas&gt;
  &lt;/center&gt;
  &lt;script&gt;
  //Background Image 
  var bgReady = false;
  var bgImage = new Image();
  bgImage.onload = function(){
      bgReady = true;
  }
  bgImage.src="img/heic0706a.jpg";
  
  //Friend Image
  var fReady = false; 
  var fImage = new Image();
  fImage.onload = function(){
        fReady = true;
  }
  fImage.src="img/g_fighter.png";
  
  //Game objects
  var hero = {
       speed:1,
       x:200,
       y:390
  };
  
  var keysDown = {};
  addEventListener("keydown", function(e){
          keysDown[e.keyCode] = true;
  }, false);
  addEventListener("keyup", function(e){
          delete keysDown[e.keyCode];
  }, false);
  
  
  function update(modifier){
  
      if(38 in keysDown){
          hero.y -= hero.speed * modifier;
      }
      if(40 in keysDown){
          hero.y += hero.speed * modifier;
      }
      if(37 in keysDown){
          hero.x -= hero.speed * modifier;
      }
      if(39 in keysDown){
          hero.x += hero.speed * modifier;
      }
  }
  
  function render(c){
      if(bgReady == true){
          c.drawImage(bgImage,0,0);
      }
      if(fReady == true){
          c.drawImage(fImage,hero.x,hero.y,100,100);
      }
  }
  function setImage(then){
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      var now = Date.now();
      var delta = now-then;
  
      update(delta/1000);
      render(ctx);
  
      then = now;
  
      requestAnimationFrame(setImage);
  }
      var w = window;
      requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
  
  function start(){
      var Then = Date.now();
      setImage(Then);
  }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>`  </p>