Как вращать 2 изображения независимо на HTML-холсте

Question

Я хочу показать набор передач, используя холст HTML. У меня есть следующее http://jsfiddle.net/jeepstone/RpmuE/, но маленькая шестеренка вращается вокруг большой шестерни, а не остается неподвижной и просто вращается. Как только я это исправлю, я смогу определить относительную скорость зубьев, но я не могу понять, почему она движется вокруг главного зубца.

Есть идеи?

Answer 1

Демо

Ха, крутая идея, главное, что я думаю, что причиной проблемы был пропущенный restore. Помните, что вы хотите сделать переводы до поворотов. В противном случае вы будете переводить canvas, а затем вращать все canvas, поворачивая все в контексте.

Answer 2

Ах, хорошо.В этом есть смысл.Принеси коробку передач!