Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

2.1.3 HTML5 Canvas Rotate Transform Tutorial

Discussion

To rotate the HTML5 Canvas, we can use the rotate() transform method.  The rotate transformation requires an angle in radians.  To define the rotation point, we need to first translate the canvas context such that the top left corner of the context lies on the desired rotation point.  In this tutorial, we've translated the canvas context such that the top left corner of the context is directly on the center of the rectangle, which produces a rotation about the center of the rectangle.

comments powered by Disqus