CanvasRenderingContext2D: transform() method

transform(a, b, c, d, e, f)

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

a (m11)

The cell in the first row and first column of the matrix.

b (m12)

The cell in the second row and first column of the matrix.

c (m21)

The cell in the first row and second column of the matrix.

d (m22)

The cell in the second row and second column of the matrix.

e (m41)

The cell in the first row and third column of the matrix.

f (m42)

The cell in the second row and third column of the matrix.

If a point originally had coordinates $(x, y)$, then after the transformation it will have coordinates $(ax + cy + e, bx + dy + f)$. This means:

• e and f control the horizontal and vertical translation of the context.
• When b and c are 0, a and d control the horizontal and vertical scaling of the context.
• When a and d are 1, b and c control the horizontal and vertical skewing of the context.

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.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Result

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