Tutorials References Exercises Menu
Paid Courses

HTML canvas transform() Method

❮ HTML Canvas Reference


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:



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.

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