title: HTML5 canvas - rotate object without moving coordinates
body: <p>What I have is this:
  <img src="https://i.stack.imgur.com/EeQwG.png" alt="Tank"></p>
  
  <p>What I want is to rotate the <strong>red</strong> rectangle e.g. 20 degrees, but this is what I end up with:
  <img src="https://i.stack.imgur.com/UuJt2.png" alt="Bad rotation"></p>
  
  <p>As you can see, the rectangle is rotated perfectly, but it's moved and doesn't match the black object anymore.</p>
  
  <p>My code is:</p>
  
  <pre><code>context.save();
  context.rotate(angle * Math.PI / 180); // in the screenshot I used angle = 20
  context.translate(angle * 4, 2);
  context.fillStyle = "red";
  context.fillRect(x + 14, y - 16, 5, 16);
  context.restore();
  </code></pre>
  
  <p>I want to make the rectangle turn without moving from its position.</p>
  
  <p>Thanks.</p>