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 Standard The 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.
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 3.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 No support No | 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