156 Chapter 5—Canvas
Before moving on to another section of the Canvas specification, Transforma-
tions, we should mention that when using a video element as the source of cre-
atePattern(), the first frame of the video or the poster frame, if present, is used
as a pattern, similar to the drawImage() method.5.11 Transformations
Canvas transformations manipulate the coordinate system directly. When mov-
ing a rectangle, you are not only moving the actual element, but also shifting the
whole coordinate system and only then redrawing the rectangle. The three basic
transformations are scale(), rotate(), and translate(), as shown in Figure 5.35.Figure 5.35 The basic transformations “scale()”, “rotate()”, and “translate()”context.scale(x, y)
context.rotate(angle)
context.translate(x, y)For scaling via scale(), we need two multiplicands as arguments for the size
change of the x and y dimension, rotations using rotate() require the angle of
clockwise rotation in radiant, and moving via translate() defines offsets in x- und
y-directions in pixels. If combining these methods, the individual transformations