DOMMatrixReadOnly: transformPoint() 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.

See full compatibility

Note: This feature is available in Web Workers.

The transformPoint method of the DOMMatrixReadOnly interface creates a new DOMPoint object, transforming a specified point by the matrix. Neither the matrix nor the original point are altered.

You can also create a new DOMPoint by applying a matrix to a point with the DOMPointReadOnly.matrixTransform() method.

Syntax

transformPoint()
transformPoint(point)

Parameters

point

A DOMPoint or DOMPointReadOnly instance, or an object containing up to four of the following properties:

x: The x-coordinate of the point in space as a number. The default value is 0.
y: The y-coordinate of the point in space as a number. The default value is 0.
z: The z-coordinate, or depth coordinate, of the point in space as a number. The default value is 0.; positive values are closer to the user and negative values retreat back into the screen.
w: The w perspective value of the point, as a number. The default is 1.

Return value

A DOMPoint.

Examples

2D transform

const matrix = new DOMMatrixReadOnly();
const point = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
let newPoint = matrix.transformPoint(point); // DOMPoint {x: 10, y: 20, z: 0, w: 1}

3D transform

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

// Matrix with translate(22, 37, 10) applied
const matrix3D = new DOMMatrixReadOnly([
  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 22, 37, 10, 1,
]);
const point3D = new DOMPointReadOnly(5, 10, 3); // DOMPointReadOnly {x: 5, y: 10, z: 3, w: 1}
const transformedPoint3D = point3D.matrixTransform(matrix3D); // DOMPoint {x: 27, y: 47, z: 13, w: 1}

Specifications

Specification
Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-transformpoint

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
`transformPoint()`	Chrome – Full support Chrome 61 (Release date: 2017-09-05) footnote Full support	Edge – Full support Edge 79 (Release date: 2020-01-15) footnote Full support	Firefox – Full support Firefox 33 (Release date: 2014-10-14) footnote Full support	Opera – Full support Opera 48 (Release date: 2017-09-27) footnote Full support	Safari – Full support Safari 11 (Release date: 2017-09-19) footnote Full support	Chrome Android – Full support Chrome Android 61 (Release date: 2017-09-05) footnote Full support	Firefox for Android – Full support Firefox for Android 33 (Release date: 2014-10-14) footnote Full support	Opera Android – Full support Opera Android 45 (Release date: 2018-02-15) footnote Full support	Safari on iOS – Full support Safari on iOS 11 (Release date: 2017-09-19) footnote Full support	Samsung Internet – Full support Samsung Internet 8 (Release date: 2018-07-18) footnote Full support	WebView Android – Full support WebView Android 61 (Release date: 2017-09-05) footnote Full support	WebView on iOS – Full support WebView on iOS 11 (Release date: 2017-09-19) footnote Full support

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

Full support: Full support

DOMMatrixReadOnly: transformPoint() method

Legend