title: Javascript: how to move a context object in relation with its rotation
body: <p>I want to make game using html canvas. My objective is to move a rectangle up and down, and it will rotate when I press left and right. Think like a car, cars only go forward and backwards but they don't go left and right, they rotate.
   The only problem is my rectangle rotates but it doesn't move in relation with its rotation, it only moves up and down no matter where it is facing.</p>
  
  <pre><code>this.Draw = function() {    //this goes inside constructor
      ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
      ctx.save();
      ctx.fillStyle = this.color;
      ctx.translate(this.x, this.y);
      ctx.rotate(this.angle * Math.PI / 180);
      ctx.fillRect( -1* this.width/2 , -1* this.height/2, this.width, this.height); //center context to get a center rotation
      ctx.restore();   };
  </code></pre>
  
  <p>I could not figure it out how to move the rectangle forward, so it just moves up and down.
    For my rectangle movement I used a list with the 4 inputs that I have, and then when they are true, they'll move. Here:</p>
  
  <pre><code>this.inputWASD = [false,false,false,false]; //this goes inside constructor
  //input for ----&gt;[ W  ,  A  ,   S  ,   D ]  &lt;--------- 
  
  switch(keyDown.key){
      case 87: //w
          rect1.inputWASD[0] = true;
          break;
      case 83:  //s
          rect1.inputWASD[2] = true;
          break;
      case 65:  //a
          rect1.inputWASD[1] = true;
          break;
      case 68:  //d
          rect1.inputWASD[3] = true;
          break;                     };
  
  switch(keyUp.keyCode){
      case 87:
          rect1.inputWASD[0] = false;
          break;
      case 83:
          rect1.inputWASD[2] = false;
          break;
      case 65:
          rect1.inputWASD[1] = false;
          break;
      case 68:
          rect1.inputWASD[3] = false;
          break;     };
  
  
  funtion Update() {
          if(this.inputWASD[0] == true){this.y-= velocity}    //UP and DOWN
          else if(this.inputWASD[2] == true){this.y+= velocity};
  
          if(this.inputWASD[1] == true){this.angle -= angleMovement}  //Rotate RIGHT and LEFT
          else if(this.inputWASD[3] == true) {this.angle += angleMovement};
  </code></pre>
  
  <p>If you don't know an answer but you know about a library that I can use to move a context object based on its rotation, please tell me.</p>