# Canvas transform() Method

❮ 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:

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

The `transform()` method scales, rotates, moves, and skews the context.

Each object on the canvas has a transformation matrix.

The `transform()` method replaces the transformation matrix, and multiplies the it with a matrix described by:

 a c e b d f 0 0 1

## Notes

The transformation affects drawings made AFTER transform() is called.

The transformation is relative to other rotate(), scale(), translate(), or transform() transformations. If you scale by two, and transform() scales by two, the drawings will scale by four.

The scale() Method (Scale the context)

The rotate() Method (Rotate the context)

The translate() Method (Remap the 0,0 position)

The setTransform() Method (Scale, rotate, move, skew context).

## Syntax

 context.transform(a, b, c, d, e, f)

## Parameter Values

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

 NONE

## 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 Reference
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.