HTML Canvas - getTransform() Method

The HTML Canvas getTransform() method of Canvas 2D API gets the current transformation matrix applied to the context object of CanvasRenderingContext2D interface.

Syntax

Following is the syntax of HTML Canvas getTransform() method −

CanvasRenderingContext2D.getTransform();

Parameters

It does not take any parameters as it only returns the object data to which transformation matrix is applied.

Return value

It returns a transformation DOMMatrix object which is applied to the Canvas element.

Example

The following example returns transformation parameters on window alert of a CanvasRenderingContext2D interface context object of Canvas element using HTML Canvas getTransform() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.setTransform(1, 0.5, 0.7, 0.9, 0.8, 0);
         context.fillRect(25, 25, 150, 100);
         var trans = context.getTransform();
         alert(trans);
      }
   </script>
</body>
</html>

Output

The output returned by the following code on the webpage as − HTML Canvas GetTransform Method

Example

The following example applies a transformation matrix to the graphic rendered inside the Canvas element and returns its properties by the console using getTransform() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="150" height="250" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.fillStyle = 'blue';
      context.setTransform(0, 0.2, 0.4, 0.6, 0.8, 1);
      context.fillRect(50, 50, 200, 200);
      var trans = context.getTransform();
      console.log(trans);
   </script>
</body>
</html>

Output

The output returned by the following code on the webpage as −

html_canvas_shadows_and_transformations.htm