This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.


ctx.currentTransform [= value];
A DOMMatrix or SVGMatrix object to use as the current transformation matrix.


Using the currentTransform method

This is just a simple code snippet that uses the currentTransform property to set a transformation matrix.


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


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

var 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);

Edit the code below and see your changes update live in the canvas (make sure to use a browser that supports this feature — see the compatibility table):


Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.currentTransform' in that specification.
Living Standard  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes1 Yes No2 No No No3
Returns a DOMMatrix No4 ? ? No No No3
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No Yes No No No No
Returns a DOMMatrix No4 No4 Yes ? ? ? No

1. This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

2. See bug 928150. Firefox also supports the experimental and prefixed properties mozCurrentTransform and mozCurrentTransformInverse which set or get the current (inverse) transformation matrix.

3. See webkitbug(174278).

4. See

See also

Document Tags and Contributors

Contributors to this page: fscholz, zbjornson, nmve, chrisdavidmills, daltomania
Last updated by: fscholz,