HTML canvas transform() Method
Example
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:
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);
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the method.
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Definition and Usage
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:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
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.
| JavaScript syntax: | context.transform(a,b,c,d,e,f); |
|---|
Parameter Values
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | Play it » |
| b | Horizontal skewing | Play it » |
| c | Vertical skewing | Play it » |
| d | Vertical scaling | Play it » |
| e | Horizontal moving | Play it » |
| f | Vertical moving | Play it » |
❮ HTML Canvas Reference
