CanvasPattern.setTransform()
The
CanvasPattern.setTransform()
method uses an SVGMatrix
or DOMMatrix
object as the
pattern's transformation matrix and invokes it on the pattern.
Syntax
void pattern.setTransform(matrix);
Parameters
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 an
SVGMatrix
. 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>
<svg id="svg1"></svg>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var svg1 = document.getElementById('svg1');
var matrix = svg1.createSVGMatrix();
var img = new Image();
img.src = 'canvas_createpattern.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
pattern.setTransform(matrix.rotate(-45).scale(1.5));
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 400, 400);
};
Note that newer browser versions started to support DOMMatrix
as an
input to setTransform()
, so for example you could replace the
SVGMatrix
in the above example with the following:
const matrix = new DOMMatrix([1, .2, .8, 1, 0, 0]);
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
SVGMatrix
DOMMatrix