CanvasPattern: setTransform() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Note: This feature is available in Web Workers.
The CanvasPattern.setTransform() method uses a DOMMatrix object as the pattern's transformation matrix and invokes it on the pattern.
Syntax
js
setTransform(matrix)
Parameters
Return value
None (undefined).
Examples
Using the setTransform method
This is a code snippet which uses the setTransform method to
create a CanvasPattern with the specified pattern transformation from a
DOMMatrix. The pattern gets applied if you set it as the current
fillStyle and gets drawn onto the
canvas when using the fillRect()
method, for example.
html
<canvas id="canvas"></canvas>
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);
const img = new Image();
img.src = "canvas_create_pattern.png";
img.onload = () => {
const pattern = ctx.createPattern(img, "repeat");
pattern.setTransform(matrix.rotate(-45).scale(1.5));
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 400, 400);
};
Specifications
| Specification |
|---|
| HTML # dom-canvaspattern-settransform-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
setTransform
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Accepts a
DOMMatrix2DInit-like object parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- The interface defining this method:
CanvasPattern DOMMatrix