HTML5 Canvas Tutorial: the transform matrix

Canvas Transformations: transform matrix

Until now we used the methods translate(), scale() and rotate() for performing translations, scaling and rotations on figures. What we didn't see is that all these operations behind the scenes actually were done by implicit use of a so-called transform matrix: a two-dimensional array of numbers. Transformation matrices are used in the field of mathematics that is called Linear Algebra and used for transformations on two 2 and 3-dimensional figures and bodies. But how does it exactly work?

A transform matrix looks like this:

transformatie matrix

Associated with this transform matrix is the following method of the canvas context

context.setTransform(a,b,c,d,e,f)

Brief explanation of the transform matrix

Each kind of transformation (translation, rotation, reflecton, etc.) corresponds with a separate transform matrix. How such a matrix is constructed? See the image below for this purpose in which a coordinate system is shown containing three red arrows also called vectors, not to be confused with vectorimages.

assenstelsel

The red arrows in these positions are always the starting point for the drafting of a transform matrix. The question is always, what is the position of the arrows, after a certain transformation? We look at an example.

Example 1: Determining transform matrix of a reflection in the x-direction (that is: mirrored in the y-axis).

When we flip the red arrows in the y-axis, we get:

  • The reflection of vector OA points to the point(-1,0,0)
  • The reflection of vector OB points to the point (0,1,0)
  • The reflection of vector OA points to the point(0,0,1)

Now we can draw up the transform matrix associated with a reflection in the y-axis:

transformatie matrix van y-spiegeling

context.setTransform(-1, 0, 0, 1, 0, 0);

Example 2: Horizontal refection of a sentence.

<!doctype html>
<html>
<head>
<title>Horizontaal spiegelen van een zin. </title>
<script> 
function transformation(){
    var canvas = document.getElementById("transformations");
    var context = canvas.getContext("2d");
	context.translate(200,100)
    context.fillStyle="black";
    context.font="20pt verdana";
    context.fillText("Spiegel mij",0,0);
    //Now we use transform matrix in by means of the setTransform() function 
    context.setTransform(-1,0,0,1,0,0);
    context.fillStyle="red";
    context.fillText("Spiegel mij", -200,100);
};
window.addEventListener("load", transformation, true);
</script>
</head>
<body>	
	<canvas id="transformations" style="border: 1px solid;" width="400" height="200"></canvas>
</body>
</html>
Horizontaal spiegelen van een zin.
Image 4. Horizontal refection of a sentence.

Check this example in your browser

Example 3:Vertical reflection of a sentence, stretching and adding a gradient to it.

<!doctype html>
<html>
<head>
<title>Vertikaal spiegelen van een zin </title>
<script> 

function transformation(){
  var canvas = document.getElementById("transformations");
  var context = canvas.getContext("2d");
  context.translate(20,100)
  context.fillStyle="red";
  context.font="40pt verdana";
  context.fillText("Spiegel mij",0,0);
  context.setTransform(1,0,0,-1,0,0);
 
  //voeg een schaalfactor en een gradient toe
  context.scale(1,1.5);
  var grad = context.createLinearGradient(0,-65, 0,-130);
  grad.addColorStop(0, 'red');
  grad.addColorStop(1, 'rgba(255,255,255,0)');
  context.fillStyle=grad;
  context.fillText("Spiegel mij", 20,-84);
  };
 
  window.addEventListener("load", transformation, true);

</script>
</head>
<body>	
	<canvas id="transformations" style="border: 1px solid;" width="400" height="200"></canvas>
</body>
</html>
Horizontaal spiegelen van een zin.
Image 5. Vertical reflection of a sentence, then stretching and adding a gradient to it.

Check this example in your browser

Skewing (shearing) of a rectangle

Example 4: Skewing (shearing) of a rectangle.

<!doctype html>
<html>
<head>
<title>Scheeftrekken van een rechthoek </title>
<script> 
function shear(){
    var canvas = document.getElementById("transformations");
    var context = canvas.getContext("2d");
 
    var rectangularWidth = 150;
    var rectangularHeight = 75;
 
    // shear matrix:
    //  1  dx  0              
    //  dy  1  0
    //  0  0  1	
 
    var dx = 0.75; // .75 horizontal shear
    var dy = 0; // no vertical shear
    // translate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);
 
    // apply transformation
    context.transform(1, dy, dx, 1, 0, 0);
 
    context.fillStyle = "red";
    context.fillRect(-rectangularWidth / 2, -rectangularHeight / 2, 
    							rectangularWidth, rectangularHeight);
};
   window.addEventListener("load", shear, true);


</script>
</head>
<body>	
	<canvas id="transformations" style="border: 1px solid;" width="400" height="200"></canvas>
</body>
</html>
Scheeftrekken van een rechthoek.
Image 6. Shearing a rectangle

Check this example in your browser

Resetting the Canvas context

To reset the Canvas context to its original state, we can use the following transform matrix:

Reset transformatie matrix.

Example 5: restoring to starting position of the canvas context .

<!doctype html>
<html>
<head>
<title>Reset transformatie matrix </title>
<script> 
function contextReset(){
    var canvas = document.getElementById("transformations");
    var context = canvas.getContext("2d");
 
    var rectangularWidth = 100;
    var rectangularHeight = 75;
 
    // ranslate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);
 
    context.fillStyle = "black";
    context.fillRect(-rectangularWidth / 2, -rectangularHeight / 2, 
                                                      rectangularWidth, rectangularHeight);
 
    // Reset Transformation matrix
    // 1 0 0
    // 0 1 0
    // 0 0 1
 
    //  apply transformation
    context.setTransform(1, 0, 0, 1, 0, 0);
 
    context.fillStyle = "red"
    context.fillRect(0, 0, rectangularWidth, rectangularHeight);
};
   window.addEventListener("load", contextReset, true);
</script>
</head>
<body>	
	<canvas id="transformations" style="border: 1px solid;" width="400" height="200"></canvas>
</body>
</html>
reset canvas context
Image 8. Resetting the canvas context to its original state.

Check this example in your browser

Next tutorial

Leave a comment