CanvasRenderingContext2D: transform() method

Syntax

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

The transformation matrix is described by: .

Parameters

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.

Return value

None (undefined).

Examples

Skewing a shape

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

Specifications

Browser compatibility

See also

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