HTML Canvas - Transformations

We have learned about how the Canvas grid is used to draw shapes using the coordinates. We can use transformations to translate the position of origin to a different position, rotate and scale the grid.

Save and restore are two indispensable methods that help us to draw complex drawings. Each of the methods is described below.

S.No Method & Description
1

Save()

This method is called to save the current state of the Canvas element. It saves the entire state of canvas.
2

Restore()

This method rollbacks the last saved canvas state.

Canvas uses the stack to store all the modifications done to the canvas element. The save() method can be called as many times as the user need and is pushed into the stack. Each time we call the restore() method, the last saved state is popped off the stack and is restored into the canvas.

Example

The following example illustrates how save() and restore can be implemented in the Canvas element.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="transform();">
      <canvas id="canvas" width="300" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function transform() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'orange';
            context.fillRect(40, 40, 200, 150);
            context.save();
            context.fillStyle = 'white';
            context.fillRect(55, 55, 170, 120);
            context.save();
            context.fillStyle = 'green';
            context.fillRect(70, 70, 140, 90);
            context.restore();
            context.fillRect(85, 85, 110, 60);
            context.restore();
            context.fillRect(100, 100, 80, 30);
         }
      </script>
   </body>
</html>

Output

The output of the following code is

Transformations

Translate

The translate() method can be used to shift the origin of the Canvas grid and draw the graphics inside. The method is given below

Translate(x, y)− The method moves the canvas origin and the grid to another position. 'x' indicates the horizontal distance to move, and 'y' indicates the vertical distance to move.

Example

The following example demonstrates the functioning of translate() method. The implementation code is given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="translate();">
      <canvas id="canvas" width="500" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function translate() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'green';
            context.fillRect(25, 25, 150, 100);
            context.translate(100, 100);
            context.fillStyle = 'blue';
            context.fillRect(125, 125, 150, 100);
         }
      </script>
   </body>
</html>

Output

The output returned by the above code is

Translate

Rotate

The rotate() method can be used to rotate the Canvas element to a certain angle using origin coordinates as the point of reference. The method is given below

rotate(angle) − The canvas element is rotated at an angle passed as the parameter in the rotate() method. To change the origin position, we can use the translate() method. The angles should be given in radians.

Example

Following example demonstrates the rotate() method and shows how the angle change results the drawing shapes.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="rotate();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function rotate() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'green';
            context.fillRect(25, 25, 150, 100);
            context.translate(100, 100);
            context.rotate(75);
            context.fillStyle = 'blue';
            context.fillRect(25, 25, 150, 100);
         }
      </script>
   </body>
</html>

Output

The shapes generated by the above image are

Rotate

Scale and Transform

The transformation methods scaling, and transforms are mainly used to change the Canvas element grid by varying units of the canvas and transforming the positions. The methods are given below.

scale(x, y) − scale method is used to increase or decrease the size of the Canvas grid. By default, one unit of the canvas element is exactly one pixel. The scale method takes all float values and the values less than 1.0 reduce the unit size and more than 1.0 increase the unit size of Canvas which is used to scale the grid.

Example for scaling

Following example scales the canvas grid and draws a text using the available functions. The implementation code is given below

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="scale();">
      <canvas id="canvas" width="600" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function scale() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.scale(1.5, 3.0);
            context.font = '50px Verdana';
            context.fillText('TutorialsPoint', 10, 50);
         }
      </script>
   </body>
</html>

Output

The following code returns the canvas text as

Example For Scaling

Transformation methods can be used to directly modify the transformation matrix. The methods available to achieve transforms are given below.

Transform(a, b, c, d, e, f) − This method multiplies the current matrix with the transformation matrix. The parameters involved are

  • a - Horizontal scaling

  • b - Horizontal skewing

  • c - Vertical skewing

  • d - Vertical scaling

  • e - Horizontal moving

  • f - Vertical moving

The setTransform(a, b, c, d, e, f) method: It resets the current transform to the identity matrix and calls the transform() method to set the specified transform using parameters.

The resetTransform() method − It changes the current matrix to the identity matrix.

Transform example

The following code implements transform methods on the text.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="transform();">
      <canvas id="canvas" width="300" height="350" style="border: 1px solid black;"></canvas>
      <script>
         function transform() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.font = '40px Verdana';
            context.strokeText('Transform', 50, 50);
            context.transform(0.5, 1.0, 1.5, 1.0, 0.5, 0);
            context.font = '40px Verdana';
            context.strokeText('Transform', 50, 50);
         }
      </script>
   </body>
</html>

Output

The output of the above code is

Transform Example
Advertisements