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:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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 »
Description
The transform() method scales, rotates, moves, and skews the context.
Each object on the canvas has a transformation matrix.
The transform() method replaces the transformation matrix,
and multiplies the it with a matrix described by:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
Notes
The transformation affects drawings made AFTER transform() is called.
The transformation is relative to other rotate(), scale(), translate(), or transform() transformations. If you scale by two, and transform() scales by two, the drawings will scale by four.
See Also:
The scale() Method (Scale the context)
The rotate() Method (Rotate the context)
The translate() Method (Remap the 0,0 position)
The setTransform() Method (Scale, rotate, move, skew context).
Syntax
| context.transform(a, b, c, d, e, f) |
Parameter Values
| Param | Description | Play it |
|---|---|---|
| a | Scales the drawing horizontally | Play it » |
| b | Skew the the drawing horizontally | Play it » |
| c | Skew the the drawing vertically | Play it » |
| d | Scales the drawing vertically | Play it » |
| e | Moves the the drawing horizontally | Play it » |
| f | Moves the the drawing vertically | Play it » |
Return Value
| NONE |
Browser Support
The <canvas> element is an HTML5 standard (2014).
transform() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference