YouTipMet Canvas Settransform
# HTML canvas setTransform() Method
[ Canvas Object](#)
## Example
Draw a rectangle, reset and create a new transformation matrix using setTransform(), draw the rectangle again, reset and create a new transformation matrix, and then draw the rectangle once more. Note that whenever you call setTransform(), it resets the previous transformation matrix and builds a new one. Therefore, in the example below, the red rectangle will not be displayed because it is underneath the blue rectangle:
YourbrowserdoesnotsupporttheHTML5canvastag.
JavaScriptοΌ
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
[Try it yourself Β»](#)
* * *
## Browser Support
The setTransform() 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 setTransform() method resets the current transformation matrix to the identity matrix, and then runs the [transform()](#) with the same parameters.
In other words, setTransform() allows you to scale, rotate, translate, and skew the current environment.
**Note:** This transformation only affects drawings made after the setTransform() method call.
| JavaScript Syntax: | _context_.setTransform(_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](#)