Draw a rectangle, add a new transformation matrix with transform(), draw the rectangle again, add a new transformation matrix, then draw the rectangle again. Notice that each time you call transform(), it builds on the previous transformation matrix:
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the transform() method.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
Each object on the canvas has a current transformation matrix.
The transform() method replaces the current transformation matrix. It multiplies the current transformation matrix with the matrix described by:
In other words, the transform() method lets you scale, rotate, move, and skew the current context.
Note: The transformation will only affect drawings made after the transform() method is called.
Note: The transform() method behaves relatively to other transformations made by rotate(), scale(), translate(), or transform(). Example: If you already have set your drawing to scale by two, and the transform() method scales your drawings by two, your drawings will now scale by four.
Tip: Check out the setTransform() method, which does not behave relatively to other transformations.
|a||Scales the drawing horizontally||Play it »|
|b||Skew the the drawing horizontally||Play it »|
|c||Skew the the drawing vertically||Play it »|
|d||Scales the drawing vertically||Play it »|
|e||Moves the the drawing horizontally||Play it »|
|f||Moves the the drawing vertically||Play it »|