HTML canvas transform()Method
Canvas ObjectExample
Draw a rectangle, add a new transformation matrix with transform(), draw the rectangle again, add a new transformation matrix, then draw the rectangle once more. Note that every time you call transform(), it builds on the previous transformation matrix:
JavaScript：
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Try it Yourself »
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
Every 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:The transformation only affects drawings made after the transform() method call.
Note:The transform() method behaves relative to other transformations done by rotate(), scale(), translate(), or transform(). For example: if you have already set your drawing to be scaled to twice its size, the transform() method will enlarge the drawing two times more, and your drawing will eventually be four times larger.
Tip:Please see thesetTransform()method, which does not behave relative to other transformations.
| JavaScript Syntax: | context.transform(a,b,c,d,e,f); |
|---|
Parameter Values
| Parameter | Description |
|---|---|
| a | Scales the drawing horizontally. |
| b | Skews the drawing horizontally. |
| c | Skews the drawing vertically. |
| d | Scales the drawing vertically. |
| e | Moves the drawing horizontally. |
| f | Moves the drawing vertically. |
Other Extensions