CanvasPattern: setTransform() method
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
matrix
-
A
DOMMatrix
to use as the pattern's transformation matrix.
Return value
None (undefined
).
Examples
Using the setTransform
method
This is just a simple 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
html
<canvas id="canvas"></canvas>
JavaScript
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_createpattern.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);
};
Editable demo
Here's an editable demo of the code snippet above. Try changing the argument to SetTransform()
to see the effect it had.
Specifications
Specification |
---|
HTML Standard # dom-canvaspattern-settransform-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The interface defining this method:
CanvasPattern
DOMMatrix