How to create a transformation matrix with HTML5?



In the following article, we are going to learn about how to create a transformation matrix with HTML5. HTML5 canvas provides methods that allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.

Using the transform() method

The transformation matrix of the current context can be changed using the transform() method.in other words,transform() method lets you scale, rotate, move, and skew the current context.

Note − Only drawings that were created after the transform() method was called will be impacted by the transformation.

Syntax

Following is the syntax of transform() method

ctx.transform(m11, m12, m21, m22, dx, dy)

Using the set transform() method

The transform(a1, b1, c1, d1, e1, f1) function is then called with the same arguments after the setTransform(a1, b1, c1, d1, e1, f1) method resets the current transform to the identity matrix.

Syntax

Following is the syntax for set transform() method.

ctx.setTransform(m11, m12, m21, m22, dx, dy)

Let’s look into the following examples for better understanding of transformation matrix with HTML5

Example 1

In the following example we are generating a rectangle using transform() method.

<!DOCTYPE html>
<html>
<body>
   <canvas id="tutorial" width="300" height="400"></canvas>
   <script>
      var canvas = document.getElementById("tutorial");
      if (canvas.getContext){
         var ctx = canvas.getContext('2d');
         ctx.beginPath();
         ctx.lineWidth = "4";
         
         var cos=Math.cos(45*Math.PI / 180);
         var sin=Math.cos(45*Math.PI / 180);
         
         ctx.transform(cos, sin, -sin, cos, 160, 20);
         ctx.strokeStyle = "green";
         ctx.strokeRect(60, 60, 160, 160);
         ctx.stroke();
      }
   </script>
</body>
</html>

When the script gets executed, it will generate an output displaying the rectangle drawn on the webpage by triggering the transform method.

Example 2

In the following example we are making the use of transform() and set transform() method.

<!DOCTYPE HTML>
<html>
<head>
   <script>
      function drawShape(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');

         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){

            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            var sin = Math.sin(Math.PI/6);
            var cos = Math.cos(Math.PI/6);
            ctx.translate(200, 200);
            var c = 0;
            for (var i=0; i <= 12; i++) {
               c = Math.floor(255 / 12 * i);
               ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
               ctx.fillRect(0, 0, 100, 100);
               ctx.transform(cos, sin, -sin, cos, 0, 0);
            }
            ctx.setTransform(-1, 0, 0, 1, 200, 200);
            ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
            ctx.fillRect(50, 50, 100, 100);
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
   <body onload="drawShape();">
   <canvas id = "mycanvas" width = "400" height = "400"></canvas>
</body>
</html>

On running the above script, it will generate an output generated by using transform() and set transform() methods on the webpage.

Example 3

In the following example we are creating a mathematical expression Σ n = 1.

<!DOCTYPE html>
<html>
<body onload="tutorial();">
   <canvas id = "mytutorial" width = "400" height = "450"></canvas>
   <script>
      function tutorial() {
         const ctx = document.getElementById('mytutorial').getContext('2d');
         const sin = Math.sin(Math.PI / 6);
         const cos = Math.cos(Math.PI / 6);
         ctx.translate(100, 100);
         let c = 0;
         for (let i = 0; i <= 10; i++) {
            c = Math.floor(255 / 12 * i);
            ctx.fillStyle = `rgb(88, 214, 141 )`;
            ctx.fillRect(0, 0, 100, 10);
            ctx.transform(cos, sin, -sin, cos, 0, 0);
         }
         ctx.setTransform(-1, 0, 0, 1, 100, 100);
         ctx.fillStyle = 'rgb(211, 84, 0,0.5 )';
         ctx.fillRect(0, 50, 100, 100);
      }
   </script>
</body>
</html>

When the user tries to execute the script, it will display a output generated by using the transform() and set transform() method on the webpage.


Advertisements