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:
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
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 | 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 » |
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 API