DOMPointReadOnly: matrixTransform() method

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 matrixTransform() method of the DOMPointReadOnly interface applies a matrix transform specified as an object to the DOMPointReadOnly object, creating and returning a new DOMPointReadOnly object. Neither the matrix nor the point are altered.

If the matrix passed as a parameter is 2D (the is2D is true) then this is a 2D transformation and the point's z coordinate will be 0 and point's w perspective will be 1. Otherwise this is a 3D transformation.

You can also create a new DOMPoint with a point and matrix with the DOMMatrixReadOnly.transformPoint() method.

Syntax

js
matrixTransform()
matrixTransform(matrix)

Parameters

Return value

A new DOMPoint object.

Examples

2D transform

In this example, we apply a 2D matrix transform to a DOMPointReadOnly, creating a new DOMPoint:

js
const originalPoint = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
const matrix = new DOMMatrix([1, 0, 0, 1, 15, 30]);

const transformedPoint = originalPoint.matrixTransform(matrix); // DOMPoint {x: 25, y: 50, z: 0, w: 1}

console.log(transformedPoint.toJSON()); // output: {x: 25, y: 50, z: 0, w: 1}

3D transform

In this example, we apply a 3D matrix transform to a DOMPointReadOnly:

js
const point = new DOMPointReadOnly(5, 10); // DOMPointReadOnly {x: 5, y: 10, z: 0, w: 1}
const matrix3D = new DOMMatrix().translate(0, 0, 10);
const transformedPoint = point.matrixTransform(matrix3D); // DOMPoint {x: 5, y: 10, z: 10, w: 1}

Specifications

Specification
Geometry Interfaces Module Level 1
# dom-dompointreadonly-matrixtransform

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
matrixTransform()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also