HTML5 Canvas Rotate Transform TutorialPublished on January 18th 2011 by Eric Rowell
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.