###### Summary -

In this topic, we described about the below sections -

• Canvas Transform

Rotation,translation,and scaling are achieved by using a transformation matrix. The transform matrix is a set of nine numbers that are used to convert a three-dimensional array, such as a bitmap using linear algebra.

The transform()method is used to multiply that current transformation matrix with the specified matrix below–

`````` a    c    e
b    d    f
0    0    1
``````

The setTransform(a, b, c, d, e, f) procedure resets the present transform to the identity matrix, and then refer to the transform(a, b, c, d, e, f) process with the similar arguments.

HTML5 canvas offers methods to modify the transformation matrix directly. The transformation matrix originally identity transform and then adjusted using the transformation procedures.

Note! The arguments a, b, c, d, e, and f are sometimes called m11, m12, m21, m22, dx, and dy or m11, m21, m12, m22, dx, and dy.

### transform()

The transform() method is used to alter the transformation matrix of the present context. This process shifts the transformation matrix to use the matrix provided by the arguments.

#### Syntax -

``context.transform(a,b,c,d,e,f);``

Parameter Value Description
a number Horizontal scaling. Increases or decreases the pixels size horizontally.
b number Horizontal skewing. This angles the X axis up or down.
c number Vertical skewing. This angle the Y axis left or right.
d number Vertical scaling. Increases or decreases the pixels size vertically.
e number Horizontal moving. Moves the whole coordinate system horizontally.
f number Vertical moving. Moves the whole coordinate system vertically.

#### Example -

The below example shows the usage of transform() methods.
``````<!DOCTYPE html>
<html>
<title>Matrix Transforms</title>
<body>
<canvas id="myCanvas" width="400" height="200"style="border:2px
solid #00d3d3;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var cos=Math.cos(45*Math.PI / 180);
var sin=Math.cos(45*Math.PI / 180);
ctx.translate(100, 100);
var a = 0, b = 0, c = 0;
for (var i=0; i <= 8; i++) {
a = Math.floor(255 / 8 * ( i / 1.9));
b = Math.floor(255 / 8 * ( i / 1.2) );
c = Math.floor(255 / 8 * ( i / 1.5) );
ctx.fillStyle = "rgb(" + a + "," + b + "," + c + ")";
ctx.fillRect(0, 0, 50, 50);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
</script>
</body>
</html>
``````

### setTransform() method -

This method reset the current transform, and then invoke the transform(a, b, c, d, e, f) method with the same arguments. This process shifts the transformation matrix to the matrix provided by the arguments.

#### Syntax -

``````context.setTransform(a,b,c,d,e,f);
``````
Parameter Value Description
a number Horizontal scaling. Increases or decreases the pixels size horizontally.
b number Horizontal skewing. This angles the X axis up or down.
c number Vertical skewing. This angle the Y axis left or right.
d number Vertical scaling. Increases or decreases the pixels size vertically.
e number Horizontal moving. Moves the whole coordinate system horizontally.
f number Vertical moving. Moves the whole coordinate system vertically.

#### Example -

The below example shows the usage of setTransform() methods.
``````<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas1" width="400" height="300" style="border:2px solid  #00d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.fillStyle = "#32a897";
ctx.fillRect(100, 50, 150, 100)
ctx.setTransform(0.9,0.5,-0.5, 0.9, 70, 10);
ctx.fillStyle = "#255394";
ctx.fillRect(100, 50, 150, 100);
</script>
</body>
</html>
``````

#### Output-

Your browser does not support the HTML5 canvas tag.

### Browser Support

The following browsers with versions in the table indicates the initial browser version that completely endorses the transform property.

Property Chrome Edge Firefox Safari Opera
transform(),
setTransform()
Yes 9.0 and above Yes Yes Yes