W3cubDocs

/Web APIs

DOMMatrix: DOMMatrix() constructor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

Note: This feature is available in Web Workers.

The DOMMatrix constructor creates a new DOMMatrix object which represents 4x4 matrices, suitable for 2D and 3D operations.

Syntax

new DOMMatrix()
new DOMMatrix(init)

Parameters

init Optional

An array of numbers specifying the matrix you want to create, or a CSS transform string.

In case an array of numbers is passed, the behavior depends on the length of the array:

  • for a 6-element array of components in the form [a, b, c, d, e, f], a 2D matrix is created, initialized with the provided components.
  • for a 16-element array of components (in the column-major order) in the form [m11, m12, m13, …, m42, m43, m44], a 3D matrix is created, initialized with the provided components.

Examples

This example creates a DOMMatrix to use as an argument for calling DOMPointReadOnly.matrixTransform().

const point = new DOMPoint(5, 4);
const scaleX = 2;
const scaleY = 3;
const translateX = 12;
const translateY = 8;
const angle = Math.PI / 2;
const matrix = new DOMMatrix([
  Math.cos(angle) * scaleX,
  Math.sin(angle) * scaleX,
  -Math.sin(angle) * scaleY,
  Math.cos(angle) * scaleY,
  translateX,
  translateY,
]);
const transformedPoint = point.matrixTransform(matrix);

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
DOMMatrix 6152 79121212–79 33491.5 4815≤12.1 1154 611818 33494 4814≤12.1 1143 8.01.01.0 614.44.4 1143

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix/DOMMatrix