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.
Code Editor
Modified on April 9th, 2013
by Eric Rowell