Easy Tutorial
❮ Met Node Removechild Prop Doc Readystate ❯

HTML canvas setTransform() Method

Canvas Object

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.

Canvas Object

❮ Met Node Removechild Prop Doc Readystate ❯