CanvasRenderingContext2D: setTransform() method

setTransform(a, b, c, d, e, f)
setTransform(matrix)

The transformation matrix is described by: $\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$

This transformation matrix gets multiplied on the left of a column vector representing each point being drawn on the canvas, to produce the final coordinate used on the canvas.

setTransform() has two types of parameter that it can accept. The older type consists of several parameters representing the individual components of the transformation matrix to set:

a (m11)

Horizontal scaling. A value of 1 results in no scaling.

b (m12)

Vertical skewing.

c (m21)

Horizontal skewing.

d (m22)

Vertical scaling. A value of 1 results in no scaling.

e (dx)

Horizontal translation (moving).

f (dy)

Vertical translation (moving).

The newer type consists of a single parameter, matrix, representing a 2D transformation matrix to set (technically, a DOMMatrixInit object; any object will do as long as it contains the above components as properties).

None (undefined).

This example skews a rectangle both vertically (.2) and horizontally (.8). Scaling and translation remain unchanged.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Result

In the following example, we have two <canvas> elements. We apply a transform to the first one's context using the first type of setTransform() and draw a square on it, then retrieve the matrix from it using CanvasRenderingContext2D.getTransform().

We then apply the retrieved matrix directly to the second canvas context by passing the DOMMatrix object directly to setTransform() (i.e. the second type), and draw a circle on it.

HTML

<!-- First canvas (ctx1) -->
<canvas width="240"></canvas>
<!-- Second canvas (ctx2) -->
<canvas width="240"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");

ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);

let storedTransform = ctx1.getTransform();
console.log(storedTransform);

ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
ctx2.fill();

Result

• The interface defining this method: CanvasRenderingContext2D
• CanvasRenderingContext2D.transform()