title: Rotate an image around its center in canvas
body: <p>I'm trying to do my first image animation on canvas. I want the image to rotate but something is not correct in my code. Any ideas?  This is all in a jquery document ready:</p>
  
  <pre><code>var canvas = document.getElementById('logobg1');  
      var ctx = canvas.getContext('2d');
  
      var img = new Image();   // Create new Image object
      img.src = 'images/containerbg.png'; // Set source path // set img src
  
      img.onload = function(){ // when image loads
          ctx.drawImage(img,0,0);
          setInterval(function() {
              ctx.save();
              ctx.clearRect(-ctx.canvas.width/2, -ctx.canvas.height/2, ctx.canvas.width, ctx.canvas.height);
              ctx.drawImage(img,0,0);
              ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); // set canvas context to center
              ctx.rotate(Math.PI / 180 * 0.5); // 1/2 a degree
              ctx.restore();
          }, 16);
      }
  </code></pre>