Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

2.1.3 HTML5 Canvas Rotate Transform Tutorial

Description

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.

Demo