The CanvasPattern.setTransform()
method uses a DOMMatrix
object as the pattern's transformation matrix and invokes it on the pattern.
The CanvasPattern.setTransform()
method uses a DOMMatrix
object as the pattern's transformation matrix and invokes it on the pattern.
js
setTransform(matrix)
None (undefined
).
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
<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_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); };
Here's an editable demo of the code snippet above. Try changing the argument to SetTransform()
to see the effect it had.
Specification |
---|
HTML Standard # dom-canvaspattern-settransform-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
setTransform |
68 | 79 | 33 | No | 55 | 11.1 | 68 | 68 | 33 | 48 | 11.3 | 10.0 |
dommatrix |
68 | 79 | 79 | No | 55 | 11.1 | 68 | 68 | 79 | 48 | 11.3 | 10.0 |
CanvasPattern
DOMMatrix
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern/setTransform