HTML5 Guidelines for Web Developers

5.11 Transformations 159

Table 5.3 Components of a Canvas matrix transformation

Component Content

m11 Scale in x-axis

m12 Horizontal shear

m21 Vertical shear

m22 Scale in y-axis

dx Translate along x-axis

dy Translate along y-axis

The main difference between them is that transform() changes the current
transformation matrix via multiplication, whereas setTransform() overwrites
the existing matrix with the new one.

The three basic methods could also be formulated as attributes of transform()
or setTransform() and are basically nothing else than convenient shortcuts for
corresponding matrix transformations. Table 5.4 lists these attributes and oth-
er useful matrices for flipping (flipX/Y) and skewing (skewX/Y). The angles for
skewing are again specified in radiant.

Table 5.4 Matrices of basic transformations and other useful transformation methods

Method Transformation Matrix (m11, m12, m21, m22, dx, dy)

scale(x, y) x,0,0,y,0,0

rotate(angle) cos(angle),sin(angle), -sin(angle), cos(angle),0,0

translate(x, y) 1,0,0,1,x,y

flipX() -1,0,0,1,0,0

flipY() 1, 0, 0, -1, 0, 0

skewX(angle) 1,0,tan(angle),1,0,0

skewY(angle) 1,tan(angle),0,1,0,0)

Before further exploring Canvas transformations using a detailed example,
we should mention that both getImageData() and putImageData() are not af-
fected by transformations, according to the specification. The call getImageDa-
ta(0,0,100,100) always gets the 100 × 100 pixel square in the top-left corner of
the canvas regardless of whether the coordinate system was translated, scaled,