CanvasRenderingContext2D.currentTransform
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The CanvasRenderingContext2D
.currentTransform
property of the Canvas 2D API returns or sets an SVGMatrix
object for the current transformation matrix.
Syntax
<var>ctx.currentTransform [= value];</var>
value
- An
SVGMatrix
object to use as the current transformation matrix.
Examples
Using the currentTransform
method
This is just a simple code snippet that uses the currentTransform
property to set a transformation matrix.
HTML
<canvas id="canvas"></canvas>
JavaScript
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):
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:150px"> 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);</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.currentTransform' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) [1] | Not supported [2] | Not supported | Not supported | Not supported |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | Not supported | Not supported | Not supported | Not supported | Not supported | Not supported |
[1] This feature is deactivated by default. Enable the ExperimentalCanvasFeatures
flag to test it.
[2] See bug 928150. Gecko also supports the experimental and prefixed properties mozCurrentTransform
and mozCurrentTransformInverse
which set or get the current (inverse) transformation matrix.
See also
- The interface defining it,
CanvasPattern
SVGMatrix
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/currenttransform