Web/API/CanvasRenderingContext2D/currentTransform

ObsoleteThis feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The CanvasRenderingContext2D.currentTransform property of the Canvas 2D API returns or sets a DOMMatrix (current specification) or SVGMatrix ' (old specification) object for the current transformation matrix.

Syntax

ctx.currentTransform [= value];

value: A DOMMatrix or SVGMatrix ' object to use as the current transformation matrix.

Examples

Manually changing the matrix

This example uses the currentTransform property to set a transformation matrix. A rectangle is then drawn using that transformation.

HTML

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

JavaScript

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

let matrix = ctx.currentTransform;
matrix.a = 1;
matrix.b = 1;
matrix.c = 0;
matrix.d = 1;
matrix.e = 0;
matrix.f = 0;
ctx.currentTransform = matrix;
ctx.fillRect(0, 0, 100, 100);

Result

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`currentTransform` Experimental'	Chrome Full support Yes Disabled' Full support Yes Disabled' Disabled' This feature is behind the `Experimental Web Platform Features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support ≤18	Firefox No support No Notes' No support No Notes' Notes' See bug 928150. Firefox also supports the experimental and prefixed properties mozCurrentTransform and mozCurrentTransformInverse which set or get the current (inverse) transformation matrix.	IE No support No	Opera No support No	Safari No support No Notes' No support No Notes' Notes' See webkitbug(174278).	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
Returns a `DOMMatrix` Experimental'	Chrome No support No Notes' No support No Notes' Notes' See bug 637940.	Edge No support No Notes' No support No Notes' Notes' See bug 637940.	Firefox No support No	IE No support No	Opera No support No	Safari No support No Notes' No support No Notes' Notes' See bug 174278.	WebView Android No support No Notes' No support No Notes' Notes' See bug 637940.	Chrome Android No support No Notes' No support No Notes' Notes' See bug 637940.	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No Notes' No support No Notes' Notes' See bug 637940.

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.