HTML5 Canvas Transform

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>
  <head>
     <title>Matrix Transforms</title>
  </head>
  <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>

Output-

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-

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