Canvas setTransform() Method
Definition and Usage
Each object on the canvas has a current transformation matrix.
setTransform() method resets the current transformation matrix to the unit matrix and then runs transform().
In other words, setTransform() allows you to scale, rotate, move, and skew the current environment.
Note:This transformation will only affect the drawing after the setTransform() method call.
Example
Draw a rectangle, reset and create a new transformation matrix with setTransform(), draw a rectangle again, reset and create a new transformation matrix, and then draw a rectangle again. Please note that since you call setTransform() every time, it resets the previous transformation matrix and builds a new matrix, so the red rectangle will not be displayed in the example below as it is below the blue rectangle:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Syntax
context.setTransform(a,b,c,d,e,f);
Parameter value
| Parameter | Description |
|---|---|
| a | Horizontal rotation drawing. |
| b | Horizontal skew drawing. |
| c | Vertical skew drawing. |
| d | Vertical zoom drawing. |
| e | Horizontal movement drawing. |
| f | Vertical movement drawing. |
Browser Support
The numbers in the table indicate the first browser version that fully supports 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.
