YouTipMet Canvas Transform
# HTML canvas transform() Method
[ Canvas Object](#)
## Example
Draw a rectangle, add a new transformation matrix using 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 upon the previous transformation matrix:
YourbrowserdoesnotsupporttheHTML5canvastag.
JavaScript:
var c=document.getElementById("myCanvas");
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 »](#)
* * *
## Browser Support
The transform() method is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
**Note:** Internet Explorer 8 and earlier versions do not support the element.
* * *
## Definition and Usage
Every object on the canvas has a current transformation matrix.
The transform() method replaces the current transformation matrix. It multiplies the current transformation matrix with the matrix described by:
a c e
b d f
0 0 1
In other words, the transform() method allows you to scale, rotate, move, and skew the current context.
**Note:** The transformation will only affect drawings made after the transform() method is called.
**Note:** The transform() method behaves relative to other transformations done by rotate(), scale(), translate(), or transform(). For example: If you have already set the drawing to be scaled to twice its size, then the transform() method will scale the drawing again, and your drawing will end up being scaled to four times its original size.
**Tip:** Look at 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_ | 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. |
* * Canvas Object](#)