HTML and CSS Reference
In-Depth Information
As well as being able to move the pen around the canvas
using methods like
moveTo
and drawing shapes and lines, you
can adjust what happens to the canvas under the pen using
transformations.
Transformation methods include rotation, scaling, transformation,
and translation (all similar to their CSS counterparts).
In
Figure 5.12
, I've drawn a spiral; the aim is to have it rotate in
a circle, giving a quasi-Twilight Zone effect. Ideally I would keep
the function that draws the spiral the same, not changing any
positions, starting points, or anything else. This would keep the
code much easier to manage. So to ensure that the spiral code
remains simple, I can rotate the canvas under the pen, and then
redraw the exact same spiral, except the result is rotated slightly
in one direction.
FIguRE 5.12
An animated
spiral going around, and
around, and around.
The
rotate
method rotates from the top left (0, 0) position by
default. This wouldn't do at all, and if I rotated the canvas from
this position, the spiral would circulate offscreen, as if it were on
a pendulum. Instead I need to rotate from the centre of the spi-
ral, which I'll place in the centre of the canvas. Therefore I need
to rotate from the centre of the canvas.