Rotation

Rotating user space

Rotation turns the user coordinate system, through a fixed angle about the origin. We can use this to draw shapes at different orientations, without changing the drawing code.

We use the rotate method of the Context to perform the rotation:

ctx.rotate(math.pi/6)
ctx.rectangle(300, 200, 200, 100)

After rotating by $pi/6$, the coordinate space is rotated by 30 degrees about the origin (0, 0).

By default, the rotation is clockwise. If the user space was mirrored once, then, the rotation will be counter-clockwise.

In the diagram below, we can see the effect of rotation on the red rectangle drawn with user space parameters (300, 200, 200, 100). For illustration, the dashed outline shows where the rectangle would appear without rotation.