THE WORLD'S LARGEST WEB DEVELOPER SITE

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