Easy Tutorial
❮ Dom Obj Object Prop Datetime Local Value ❯

HTML canvas transform() Method

Canvas Object

Example

Draw a rectangle, add a new transformation matrix with transform(), draw the rectangle again, add another new transformation matrix, and then draw the rectangle once more. Note that each time you call transform(), it builds on the previous transformation matrix:

JavaScript:


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the transform() method.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


Definition and Usage

Each object on the canvas has a current transformation matrix.

The transform() method replaces the current transformation matrix. It operates on the current transformation matrix with the matrix described below:

| a | c | e | | b | d | f | | 0 | 0 | 1 |

In other words, transform() allows you to scale, rotate, move, and skew the current context.

Note: This transformation only affects drawings made after the transform() method is called.

Note: The behavior of the transform() method is relative to other transformations made by rotate(), scale(), translate(), or transform(). For example, if you have set the drawing to be scaled by two, the transform() method will scale the drawing by two, resulting in a final scaling of four times.

Tip: See the setTransform() method, which does not behave relative to other transformations.

| JavaScript Syntax: | context.transform(a, b, c, d, e, f); | | --- | --- |

Parameter Values

Parameter Description
a Horizontal scaling of the drawing.
b Horizontal skewing of the drawing.
c Vertical skewing of the drawing.
d Vertical scaling of the drawing.
e Horizontal moving of the drawing.
f Vertical moving of the drawing.

Canvas Object

❮ Dom Obj Object Prop Datetime Local Value ❯