HTML and CSS Reference
FIGURE 5.12 An animated spiral
going around, and around, and
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 was 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.
The translate method can help me here. It moves the 0, 0 coor-
dinate to a new position. Figure 5.13 shows that I've drawn a dot
and also shows the arguments I passed to translate. Each time
translate runs it sets the new coordinates to 0, 0.
FIGURE 5.13 Example of how
translate can move the origin
points of the canvas.
Now to achieve my rotating spiral I need to initialise the canvas
using translate , and then use setInterval to redraw my spiral
(note that drawSpiral is my own function, rather than native,