HTML canvas setTransform()
Method
Example
Draw a rectangle, reset and create a new transformation matrix with setTransform(), draw the rectangle again, reset and create a new transformation matrix, and then draw the rectangle once more. Note that every time you call setTransform(), it resets the previous transformation matrix and builds a new one, so in the example below, the red rectangle will not be displayed because it is underneath the blue rectangle:
JavaScript:
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the setTransform() 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 setTransform() method resets the current transformation matrix to the identity matrix, then runs transform() with the same parameters.
In other words, setTransform() allows you to scale, rotate, move, and skew the current context.
Note: This transformation only affects drawings after the setTransform() method is called.
| JavaScript Syntax: | context.setTransform(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. |