Rotating around an arbitrary point: HTML5 Canvas

Question

Come see the amazing disappearing rectangle!

But seriously I have a really simple HTML5 canvas that just draws a rectangle(using lineTo instead of rect for a

Answer 1

When you rotate the canvas, it rotates from the origin (0, 0), so your rectangle ends up getting rotated off the screen.

See this example where it's only rotated 45 deg: http://jsfiddle.net/wjLSm/

One way to fix this is to translate the canvas by its width & height/2: http://jsfiddle.net/wjLSm/1/ (then 0,0 is at the middle -- be aware of this)