Easy Tutorial
❮ Att Body Text Tag Q ❯

HTML canvas transform() Method

HTML canvas Reference Manual

Example

Draw a rectangle, add a new transformation matrix using transform(), draw the rectangle again, add a 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 done by rotate(), scale(), translate(), or transform(). For example, if you have set the drawing to be scaled by two, the transform() method will double the scale of the drawing, resulting in a quadruple scaling.

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.

❮ Att Body Text Tag Q ❯