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
