The CanvasRenderingContext2D
.getTransform()
method of the Canvas 2D API retrieves the current transformation matrix being applied to the context.
Syntax
let storedTransform = ctx.getTransform();
Parameters
None.
Return value
A DOMMatrix
object.
The transformation matrix is described by: <math display="inline">\begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \\ \end{bmatrix}</math>
Note: The returned object is not live, so updating it will not affect the current transformation matrix, and updating the current transformation matrix will not affect an already returned DOMMatrix
.
Examples
In the following example, we have two <canvas>
elements. We apply a transform to the first one's context using CanvasRenderingContext2D.setTransform()
and draw a square on it, then retrieve the matrix from it using getTransform()
.
We then apply the retrieved matrix directly to the second canvas context by passing the DOMMatrix
object directly to setTransform()
, and draw a circle on it.
HTML
<canvas width="240"></canvas>
<canvas width="240"></canvas>
CSS
canvas {
border: 1px solid black;
}
JavaScript
const canvases = document.querySelectorAll('canvas');
const ctx1 = canvases[0].getContext('2d');
const ctx2 = canvases[1].getContext('2d');
ctx1.setTransform(1, .2, .8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);
let storedTransform = ctx1.getTransform();
console.log(storedTransform);
ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
ctx2.fill();
Result
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'CanvasRenderingContext2D.getTransform' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getTransform
|
Chrome
Full support 68 |
Edge
Full support 79 |
Firefox
Full support 70 |
IE
No support No |
Opera
Full support 55 |
Safari
Full support 11 |
WebView Android
Full support 68 |
Chrome Android
Full support 68 |
Firefox Android
No support No |
Opera Android
Full support 48 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 10.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.transform()
CanvasRenderingContext2D.getTransform() by Mozilla Contributors is licensed under CC-BY-SA 2.5.