title: Canvas rotate from bottom center image angle?
body: <p>How do you rotate an image with the canvas html5 element from the bottom center angle?</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;test&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
              function startup() {
                  var canvas = document.getElementById('canvas');
                  var ctx = canvas.getContext('2d');
                  var img = new Image();
                  img.src = 'player.gif';
                  img.onload = function() {
                      ctx.translate(185, 185);
                      ctx.rotate(90 * Math.PI / 180);
                      ctx.drawImage(img, 0, 0, 64, 120);
                  }
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload='startup();'&gt;
          &lt;canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"&gt;&lt;/canvas&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Unfortunately this seems to rotate it from the top left angle of the image. Any idea?</p>
  
  <p>Edit: in the end the object (space ship) has to rotate like a clock pointer, as if it is turning right/left.</p>