title: Canvas diagonal movement
body: <p>I'm trying to put together a simple "game" in HTML5. However I can't get diagonal movement working.
  The "diagonal movement" only works when the two buttons are pressed at exactly the same time. Even then it moves once. Here's the code:</p>
  
  <pre><code>    // Getting canvas, and canvas context
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      //Keymap, later passed as method parameter
      var map = [false,false,false,false];
      // Top, Right, Bottom, Left
  
  
      // Function for resetting keymap
      var resetMap = function() {
         for(i=0;i&lt;map.length;i++) {
             map[i] = false;
         };
      };
  
  
      //Function for clearing the screen before drawing
      var clrScrn = function() {
          ctx.clearRect(0,0,500,500);  
      };
  
      // The player character
      var character = function() {
          this.x = 50;
          this.y = 50;
          this.h = 50;
          this.w = 50;
      };
  
          // Draw method of the character class
          character.prototype.draw = function() {
            ctx.fillRect(this.x,this.y,this.h,this.w);  
          };
  
          // The move method of the character class
          character.prototype.move = function(map) {
  
  
              if(map[0] === true) {
                  if(map[1] == true) {
                      this.x+=5;
                      this.y-=5;
                      console.log("Pressed at the same time");
                  }
                  else {
                      this.y-=5;
                  }
              }
  
              else if(map[1] === true) {
                  this.x+=5;
              }              
              else if(map[2] === true) {
                  this.y+=5;
              }              
              else if(map[3] === true) {
                  this.x-=5;
              }
          };
  
  
      //Making a new character
      var player = new character();
          player.draw();
  
  
     // Drawing everything on screen
     var render = function() {
  
         clrScrn(); 
         player.move(map);
         player.draw();
         resetMap();
  
         requestAnimFrame(render);
     };
  
      //Calling  the render function
     render();
  
      //Binding event listener to window,checking key down, likely the source of the problem
      window.addEventListener("keydown",function(e){
  
  
          if(e.keyCode == 38 &amp;&amp; e.keyCode == 39) {
              map[0] = true;
              map[1] = true;
          }
  
          else if(e.keyCode == 38) {
              map[0] = true;
           }
          if(e.keyCode == 39) {
              map[1] = true;
           }
          if(e.keyCode == 40) {
              map[2] = true;
           }
          if(e.keyCode == 37) {
              map[3] = true;
           }
  
           console.log(e.keyCode);
  
      },false);
  
  
      //Binding event listener to key up
      window.addEventListener("keyup",function(e){
          resetMap();
      },false);
  </code></pre>