How would one rotate an image around itself using Canvas?

Question

I'm having trouble roating an image around itself using Canvas.

Since you can't rotate an image you have to rotate the canvas: if I rotate the canvas by a degree the origin around which I want to rotate changes. I don't get how to track this change.

This is my current code: http://pastie.org/669023

And a demo is at http://preview.netlashproject.be/cog/

If you want to give things a shot the zipped up code and image is at http://preview.netlashproject.be/cog/cog.zip

Answer 1

I fixed your code:

var rotation = 0;
function draw(){

  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.globalCompositeOperation = 'destination-over';

  ctx.save();
  ctx.clearRect(0,0,200,200);
  ctx.translate(100,100); // to get it in the origin
  rotation +=1;
  ctx.rotate(rotation*Math.PI/64); //rotate in origin
  ctx.translate(-100,-100); //put it back
  ctx.drawImage(cog,0,0);
  ctx.restore();
}

The important thing here is that you have to translate the image to the origin first before rotating, and translate it back!

Answer 2

it looks like this could be something you could use: http://wilq32.googlepages.com/wilq32.rollimage222

here's a test of it: http://www.antiyes.com/test/index.php