title: JS Canvas game using keypress event to modify speed when holding shift button
body: <p>I am learning how to make a game with the canvas via JavaScript, and I have the arrow keys set to move a block on the canvas. I want to add a modifier in which while holding shift, the block moves twice as fast, and I cannot get my function to work properly when the shift key is pressed. </p>
  
  <p>Any suggestions/help would be much appreciated!</p>
  
  <pre><code>              var myGameArea = {
                canvas : document.createElement("canvas"),
                start : function() {
                this.canvas.width = 540;
                this.canvas.height = 330;
                this.context = this.canvas.getContext("2d");
  
  
  
  
        document.body.appendChild(this.canvas,document.body.childNodes[0]);
            this.canvas.setAttribute("id", "myCanvas");
            this.canvas.hidden = true;
  
  
      this.interval = setInterval(updateGameArea, 1000/FPS);
      window.addEventListener('keydown', function (e) {
          myGameArea.keys = (myGameArea.keys || []);
          myGameArea.keys[e.keyCode] = (e.type == "keydown");
      })
      window.addEventListener('keyup', function (e) {
          myGameArea.keys[e.keyCode] = (e.type == "keydown");            
      })
  }, 
  clear : function(){
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
   }
  
  function component(width, height, color, x, y) {
  this.gamearea = myGameArea;
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;    
  this.x = x;
  this.y = y;    
  this.update = function() {
      ctx = myGameArea.context;
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
      this.x += this.speedX;
      this.y += this.speedY;        
  }
  }
  
  function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  
  
  
  
  
  if (myGameArea.keys &amp;&amp; myGameArea.keys[37]) {myGamePiece.speedX = -10; }
  if (myGameArea.keys &amp;&amp; myGameArea.keys[39]) {myGamePiece.speedX = 10; }
  if (myGameArea.keys &amp;&amp; myGameArea.keys[38]) {myGamePiece.speedY = -10; }
  if (myGameArea.keys &amp;&amp; myGameArea.keys[40]) {myGamePiece.speedY = 10; }
  
  
  if (myGameArea.keys &amp;&amp; myGameArea.keys[65]) {myGamePiece.speedX = -10; }
  if (myGameArea.keys &amp;&amp; myGameArea.keys[68]) {myGamePiece.speedX = 10; }
  if (myGameArea.keys &amp;&amp; myGameArea.keys[87]) {myGamePiece.speedY = -10; }
  if (myGameArea.keys &amp;&amp; myGameArea.keys[83]) {myGamePiece.speedY = 10; }
  
      //What do I need to do to get the following function to execute? (NOTE 
     //THIS WAS MOVED TO AFTER IF STATEMENTS PER COMMENT BELOW, THIS DID NOT 
      /////FIX the ISSUE)
  GetShiftState(e);
  
  myGamePiece.newPos();    
  myGamePiece.update();
  }
  
  
  //Below is the get shift key function I cannot get to work. 
  //What I am trying to do is increase the speed of the gamepiece moving 
  //when holding shift + the directional arrow
  
      function GetShiftState (e) {
              if (e.shiftKey) {
      switch(e.which) {
          case 37:
              console.log("shift + left arrow");
            myGamePiece.speedX = -20; 
              break;
          case 38:
              console.log("shift + up arrow");
      myGamePiece.speedY = -20; 
              break;
          case 39:
              console.log("shift + right arrow");
      myGamePiece.speedX = 20;
              break;
          case 40:
              console.log("shift + down arrow");
      myGamePiece.speedY = 20;
              break;
          default:
              break;
         }
     }
          else {
              console.log("Shift key is up.");
          }
      }
  </code></pre>