title: how to move an image on canvas using keyboard arrow key in html5
body: <p>I m Drawing the image on canvas with this code
  and it successfully draw the image on canvas now i want to move the image on canvas for that i write the code i check that if the right key of my keyboard is pressed i will increment the x coordinate of an image if left key is pressed  i will decrement the x coordinate but image is not moving on the canvas</p>
  
  <pre><code>player = new Image();
  player.src = "game_character.png";
  context.drawImage(player,player.x * wallDim + wallDim ,player.y * wallDim + wallDim ,50,50);
  </code></pre>
  
  <p>how to move an image on canvas</p>
  
  <pre><code> var handleInput = function(event, keyState) {
          switch(event.which) {
                case 37: { // Left Arrow
                      keyDown.arrowLeft = keyState;
                      break;
                }
                case 38: { // Up Arrow
                      keyDown.arrowUp = keyState;
                      break;
                }
                case 39: { // Right Arrow
                      keyDown.arrowRight = keyState;
                      break;
                }
                case 40: { // Down Arrow
                      keyDown.arrowDown = keyState;
                      break;
                }
          }
    }
  
    /**
    * physics
    *
    * This function contains the basic logic for the maze.
    */
    var physics = function() {
         console.log("physics ");
         console.log("first condition "+keyDown.arrowRight +player.x+1);
          if(keyDown.arrowLeft &amp;&amp; player.x-1 &gt;= 0 &amp;&amp; map[player.y][player.x-1] != 1) {
                player.x--;
                redraw = true;
          }
  
          if(keyDown.arrowUp &amp;&amp; player.y-1 &gt;= 0 &amp;&amp; map[player.y-1][player.x] != 1) {
                player.y--;
                redraw = true;
          }
  
          if(keyDown.arrowRight &amp;&amp; player.x+1 &lt; map[0].length &amp;&amp; map[player.y][player.x+1] != 1) {
                console.log("arrow right");
                player.x++;
                redraw = true;
          }
  
          if(keyDown.arrowDown &amp;&amp; player.y+1 &lt; map.length &amp;&amp; map[player.y+1][player.x] != 1) {
                player.y++;
                redraw = true;
          }
          if(keyDown.arrowRight &amp;&amp; player.x+1 &gt;= map[0].length)
          {
              player.x++;
              document.getElementById("canvas_div").style.display="none";
              document.getElementById("end_screen_div").style.display="block";
              //alert("completed");
          }
    }
  
    /**
    * draw
    *
    * This function simply draws the current state of the game.
    */
    var draw = function() {
  
          // Don't redraw if nothing has changed
          if(!redraw)
                return;
  
          context.clearRect(0, 0, cols, rows);
          context.beginPath();
  
          // Draw the maze
          for(var a = 0; a &lt; rows; a++) {
                for(var b = 0; b &lt; cols; b++) {
                      switch(map[a][b]) {
                            case C.EMPTY: context.fillStyle = colors.empty; break;
                            case C.WALL: context.fillStyle = colors.wall; break;
                      }
  
                          context.fillRect(b * wallDim, a * wallDim, wallDim, wallDim); // x, y, width, height
                }
          }
  
          // Draw the player
       /* context.fillStyle = colors.player;
          context.arc(
                player.x * wallDim + wallDim / 2, // x position
                player.y * wallDim + wallDim / 2, // y position
                wallDim / 2, // Radius
                0, // Starting angle
                Math.PI * 2, // Ending angle
                true // antiClockwise
          );*/
  
  
      player = new Image();
      player.src = "game_character.png";
  
      context.drawImage(player,player.x * wallDim + wallDim ,player.y * wallDim + wallDim ,50,50);
  
      var firstplayer=new Image();
      firstplayer.src="top_character01.png";
  
      context.drawImage(firstplayer,680,0,60,60);
  
      var secondplayer= new Image();
      secondplayer.src="top_character02.png";
  
      context.drawImage(secondplayer,750,0,60,60);
  
      context.fill();
      context.closePath();
  
          redraw = false;
    }
  </code></pre>