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 = 'https://mdn.mozillademos.org/files/222/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]);
Edit the code below and see your changes update live in the canvas:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<svg id="svg1" style="display:none"></svg>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px">
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/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);
};</textarea>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
var svg1 = document.getElementById('svg1');
var matrix = svg1.createSVGMatrix();
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'CanvasPattern.setTransform' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
setTransform
|
Chrome
Full support 68 |
Edge
Full support 79 |
Firefox
Full support 33 |
IE
No support No |
Opera
Full support 9 |
Safari
Full support 11.1 |
WebView Android
Full support 68 |
Chrome Android
Full support 68 |
Firefox Android
Full support 33 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 11 |
Samsung Internet Android
Full support 10.0 |
DOMMatrix parameter supported
|
Chrome
Full support Yes |
Edge
Full support Yes |
Firefox
Full support 79 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 79 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
See also
- The interface defining this method:
CanvasPattern
SVGMatrix
DOMMatrix
CanvasPattern.setTransform() by Mozilla Contributors is licensed under CC-BY-SA 2.5.