W3cubDocs

/Web APIs

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

Browser compatibility

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

See also

© 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