HTML canvas transform()
Method
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. |