Transforms-Canvas transformation element

This transform attribute in canvas transformation element it will allow us to modify the transformation matrix.

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

transform method can be used to multiply the present transformation matrix with the matrix described by

m11 m21 dx
m12 m22 dy
0 0 1

The transformation matrix must be marked infinity if any of the arguments are set infinite instead of throwing an exception .

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

This method can be used to reset the current transform to an identity (1 0 0) matrix and then once transformed invoke the method with the same arguments .If any arguments are set infinite the transformation matrix should also be marked infinite instead of handling an exception .

Transform Example

<pre>function draw() {
  var canvas = document.getElementById("canvas");
  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, 10);
    ctx.transform(cos, sin, -sin, cos, 0, 0);
  }

  ctx.setTransform(-1, 0, 0, 1, 200, 200);
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
  ctx.fillRect(0, 50, 100, 100);
}