DOMPointReadOnly: matrixTransform()

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 static 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 DOMMatrix.is_2dis 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
DOMPointReadOnly.matrixTransform( )
DOMPointReadOnly.matrixTransform( matrix )

Parameters

matrix

A DOMMatrix or DOMMatrixReadOnly object.

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

BCD tables only load in the browser

See also