Canvas transform() Method
Definition and Usage
Each object on the canvas has a current transformation matrix.
transform() Method replaces the current transformation matrix. It operates the current transformation matrix with the following matrix described:
a c e b d f 0 0 1
In other words, transform() allows you to scale, rotate, move, and skew the current environment.
Note:This transformation will only affect the drawing after the transform() method call.
Note:The behavior of the transform() method is relative to rotate(),scale(),translate() or other transformations completed by transform(). For example: if you have already set the drawing to double size, the transform() method will double the drawing, and your drawing will finally be quadrupled.
Tips:Please see setTransform() Method, which does not behave relative to other transformations.
Example
Draw a rectangle; add a new transformation matrix through transform() and draw the rectangle again; add another transformation matrix and draw the rectangle again. Note that every time you call transform(), it builds on the previous transformation matrix:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Syntax
context.transform(a,b,c,d,e,f);
Parameter value
| Parameter | Description |
|---|---|
| a | Horizontal scaling drawing. |
| b | Horizontal skew drawing. |
| c | Vertical skew drawing. |
| d | Vertical scaling drawing. |
| e | Horizontal movement drawing. |
| f | Vertical movement drawing. |
Browser Support
The numbers in the table indicate the first browser version to fully support this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
