CanvasRenderingContext2D.currentTransform - Web APIs 编辑

Obsolete

This 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

BCD tables only load in the browser

See also

• The interface defining this property: CanvasPattern
• SVGMatrix
• DOMMatrix