Canvas setTransform() Method
Example
Draw a rectangle. Reset the transformation matrix. Draw the rectangle again. Reset the transformation matrix. Draw the rectangle again.
Each time you call setTransform(), it builds a new matrix. In the example below the red rectangle is not shown because it is under the blue rectangle:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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 »
Description
The setTransform() method scales, rotates, moves, and skews the context.
Each object on the canvas has a transformation matrix.
The setTransform() method resets the transformation matrix to the identity
matrix, and then runs transform() with the same arguments.
Note
The transformation affects drawings made AFTER setTransform() is called.
See Also:
The scale() Method (Scale the context)
The rotate() Method (Rotate the context)
The translate() Method (Remap the 0,0 position)
The transform() Method (Scale, rotate, move, skew context)
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 » |
Return Value
| NONE |
Browser Support
The <canvas> element is an HTML5 standard (2014).
setTransform() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference