THE WORLD'S LARGEST WEB DEVELOPER SITE
×

# HTML canvas transform() Method

❮ Canvas Object

### 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() 4.0 9.0 3.6 4.0 10.1

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

❮ Canvas Object