title: HTML5 Canvas: How to make a loading spinner by rotating the image in degrees?
body: <p>I am making a loading spinner with html5 canvas. I have my graphic on the canvas but when i rotate it the image rotates off the canvas. How do I tell it to spin the graphic on its center point?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Canvas test&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
     window.onload = function() {
      var drawingCanvas = document.getElementById('myDrawing');
      // Check the element is in the DOM and the browser supports canvas
      if(drawingCanvas &amp;&amp; drawingCanvas.getContext) {
       // Initaliase a 2-dimensional drawing context
       var context = drawingCanvas.getContext('2d');
  
       //Load the image object in JS, then apply to canvas onload     
       var myImage = new Image();
       myImage.onload = function() {
        context.drawImage(myImage, 0, 0, 27, 27);
       }
       myImage.src = "img/loading.png";
  
       context.rotate(45);
      }
     }
    &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;canvas id="myDrawing" width="27" height="27"&gt;
    &lt;/canvas&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>