HTML canvas setTransform() Method
Example
Draw a rectangle, reset and create a new transformation matrix with setTransform(), draw the rectangle again, reset and create a new transformation matrix, then draw the rectangle again. Notice that each time you call setTransform(), it resets the previous transformation matrix and then builds the new matrix, so in the example below, the red rectangle is not shown, because it is under 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);
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the method.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition and Usage
Each object on the canvas has a current transformation matrix.
The setTransform() method resets the current transform to the identity matrix, and then runs transform() with the same arguments.
In other words, the setTransform() method lets you scale, rotate, move, and skew the current context.
Note: The transformation will only affect drawings made after the setTransform method is called.
| JavaScript syntax: | context.setTransform(a, b, c, d, e, f); |
|---|
Parameter Values
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawings horizontally | Play it » |
| b | Skews the drawings horizontally | Play it » |
| c | Skews the drawings vertically | Play it » |
| d | Scales the drawings vertically | Play it » |
| e | Moves the the drawings horizontally | Play it » |
| f | Moves the the drawings vertically | Play it » |
❮ Canvas Object
