YouTipCanvas Settransform
## HTML Canvas setTransform() Method
### Definition and Usage
The `setTransform()` method resets the current transform to the identity matrix, and then performs a transformation.
The `setTransform()` method allows you to reset the current transformation matrix to the identity matrix, and then apply a new transformation.
The transformation matrix is a 2D matrix that represents the current transformation state of the canvas context.
### Syntax
```javascript
context.setTransform(a, b, c, d, e, f);
### Parameter Values
| Parameter | Description |
| :--- | :--- |
| *a* | Horizontal scaling. |
| *b* | Horizontal skewing. |
| *c* | Vertical skewing. |
| *d* | Vertical scaling. |
| *e* | Horizontal moving. |
| *f* | Vertical moving. |
### Example
Your browser does not support the HTML5 canvas tag.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
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);
### Browser Support
The numbers in the table specify the first browser version that fully supports the method.
| Method | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| setTransform() | 31.0 | 12.0 | 31.0 | 9.0 | 19.0 |
### Related Pages
[HTML Canvas Reference: transform() Method](#) Method")
[HTML Canvas Reference: translate() Method](#) Method")
[HTML Canvas Reference: rotate() Method](#) Method")
[HTML Canvas Reference: scale() Method](#) Method")
[HTML Canvas Reference: resetTransform() Method](#) Method")