CanvasRenderingContext2D: transform() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The CanvasRenderingContext2D.transform() method of the Canvas 2D API multiplies the current transformation with the matrix described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.

Note: See also the setTransform() method, which resets the current transform to the identity matrix and then invokes transform().

Syntax

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

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

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)(x, y), then after the transformation it will have coordinates (ax+cy+e,bx+dy+f)(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

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

JavaScript

js
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

Specification
HTML
# dom-context-2d-transform-dev

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transform

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also