How to rotate 2 images independently on html canvas

I want to show a set of gears using HTML canvas. I've got the following http://jsfiddle.net/jeepstone/RpmuE/ but the little cog rotates 开发者_Go百科around the big cog rather than staying fixed and just rotating. Once I have it fixed I can work out the relative speeds of the cogs but I can't work out why it moves around the main cog.

Any ideas?

---

Demo

Hah cool idea, the main thing I think causing the issue was a missing restore. A thing to remember is you want to do your translates before the rotations. Otherwise you will translate the canvas, and then rotate the whole canvas thus rotating everything on the context.

---

Ah ok. That makes sense. Bring on the gearbox!