Latest web development tutorials
 

HTML canvas transform() Method

< HTML Canvas Reference

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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.

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

< HTML Canvas Reference