DOMMatrixReadOnly

The DOMMatrixReadOnly interface represents 4x4 matrices, suitable for 2D and 3D operations. If this interface defines only read-only matrices, the DOMMatrix interface which inherits from it, add all the properties and the methods to allow to have modifiable matrices.

A 4x4 matrix is suitable to describe any rotation and translation in 3D.

This interface should be available inside Web workers, though some implementations doesn't allow it yet.

Properties

This interface doesn't inherit any other property.

m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 Read only
Are double representing each component of a 4x4 matrix. They are read-only, but their counterpart, with the same name, in DOMMatrix aren't.
a, b, c, d, e, f Read only
Are double representing each component of a 4x4 matrix needed for 2D rotations and translations. They are aliases for some components of the 4x4 matrix:
2D 3D equivalent
a m11
b m12
c m21
d m22
e m41
f m42
They are read-only, but their counterpart, with the same name, in DOMMatrix aren't.
DOMMatrixReadOnly.is2D Read only
Is a Boolean indicating if the matrix contains a 2D matrix and only accept 2D transformations.
DOMMatrixReadOnly.isIdentity Read only
Is a Boolean indincating if the matrix identity, that is a matrix with 1 on the components of its diagonal, and 0 elsewhere.

Methods

This interface doesn't inherit any method.

DOMMatrixReadOnly.flipX()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being flipped around the x-axis, that is multiplied by the DOMMatrix(-1, 0, 0, 1, 0, 0). The original matrix is not modified.
DOMMatrixReadOnly.flipY()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being flipped around the y-axis, that is multiplied by the DOMMatrix(1, 0, 0, -1, 0, 0). The original matrix is not modified.
DOMMatrixReadOnly.inverse()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being inverted. The original matrix is not modified. If the matrix cannot be inverted, all its components are set to NaN and is2D() returns false.
DOMMatrixReadOnly.multiply()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being multiplied by the given DOMMatrix. The original matrix is not modified.
DOMMatrixReadOnly.rotateAxisAngle()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being rotated by the given angle and the given vector. The original matrix is not modified.
DOMMatrixReadOnly.rotate()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being rotated by the given angle, with the rotation centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.rotateFromVector()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being rotated by the angle between the given vector and (1,0), centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.scale()
Returns a DOMMatrix containing a new matrix being the result of the matrix x and y dimensions being scaled by the given factor, centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.scale3d()
Returns a DOMMatrix containing a new matrix being the result of the matrix x, y and z dimension being scaled by the given factor, centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.scaleNonUniform()
Returns a DOMMatrix containing a new matrix being the result of the matrix x, y and z dimension being scaled by the given factor for each dimension, centered on the origin given. The original matrix is not modified.
DOMMatrixReadOnly.skewX()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being skewed along the x-axis by the given factor. The original matrix is not modified.
DOMMatrixReadOnly.skewY()
Returns a DOMMatrix containing a new matrix being the result of the original matrix being skewed along the y-axis by the given factor. The original matrix is not modified.
DOMMatrixReadOnly.toFloat32Array()
Returns a Float32Array containing the 6 components (a, b, c, d, e, f) in the case of a 2D matrix or the 16 components (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) for a 3D matrix.
DOMMatrixReadOnly.toFloat64Array()
Returns a Float64Array containing the 6 components (a, b, c, d, e, f) in the case of a 2D matrix or the 16 components (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) for a 3D matrix.
DOMMatrixReadOnly.toJSON()
Returns a JSON representation of the DOMMatrixReadOnly object.
DOMMatrixReadOnly.toString()
Returns a DOMString containing the 6 components separated by a ',' and prefixed by the CSS matrix functional notation, as 'matrix (a, b, c, d, e, f)', in the case of a 2D matrix or matrix3d functional notation and the 16 components,'matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)', for a 3D matrix.
DOMMatrixReadOnly.transformPoint()
Returns a DOMPoint that is the point given in parameter multiplied by the matrix. But the original point and the matrix aren't modified.
DOMMatrixReadOnly.translate()
Returns a DOMMatrix containing a new matrix being the result of the matrix being translated by the given vector. The original matrix is not modified.

Specifications

Specification Status Comment
Geometry Interfaces Module Level 1
The definition of 'DOMMatrixReadOnly' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support61 No33 No48 No
Support in web workers61 No No No48 No
m1161 No33 No48 No
m1261 No33 No48 No
m1361 No33 No48 No
m1461 No33 No48 No
m2161 No33 No48 No
m2261 No33 No48 No
m2361 No33 No48 No
m2461 No33 No48 No
m3161 No33 No48 No
m3261 No33 No48 No
m3361 No33 No48 No
m3461 No33 No48 No
m4161 No33 No48 No
m4261 No33 No48 No
m4361 No33 No48 No
m4461 No33 No48 No
a61 No33 No48 No
b61 No33 No48 No
c61 No33 No48 No
d61 No33 No48 No
e61 No33 No48 No
f61 No33 No48 No
is2D61 No33 No48 No
isIdentity61 No33 No48 No
flipX61 No33 No48 No
flipY61 No33 No48 No
inverse61 No33 No48 No
multiply61 No33 No48 No
rotate61 No33 No48 No
rotateAxisAngle61 No33 No48 No
rotateFromVector61 No33 No48 No
scale61 No33 No48 No
scale3d61 No33 No48 No
scaleNonUniform61 No33 No48 No
skewX61 No33 No48 No
skewY61 No33 No48 No
toFloat32Array61 No33 No48 No
toFloat64Array61 No33 No48 No
toJSON61 No33 No48 No
toString61 No33 No48 No
transform61 No33 No48 No
transformPoint61 No33 No48 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support6161 No3348 No ?
Support in web workers6161 No No48 No ?
m116161 No3348 No ?
m126161 No3348 No ?
m136161 No3348 No ?
m146161 No3348 No ?
m216161 No3348 No ?
m226161 No3348 No ?
m236161 No3348 No ?
m246161 No3348 No ?
m316161 No3348 No ?
m326161 No3348 No ?
m336161 No3348 No ?
m346161 No3348 No ?
m416161 No3348 No ?
m426161 No3348 No ?
m436161 No3348 No ?
m446161 No3348 No ?
a6161 No3348 No ?
b6161 No3348 No ?
c6161 No3348 No ?
d6161 No3348 No ?
e6161 No3348 No ?
f6161 No3348 No ?
is2D6161 No3348 No ?
isIdentity6161 No3348 No ?
flipX6161 No3348 No ?
flipY6161 No3348 No ?
inverse6161 No3348 No ?
multiply6161 No3348 No ?
rotate6161 No3348 No ?
rotateAxisAngle6161 No3348 No ?
rotateFromVector6161 No3348 No ?
scale6161 No3348 No ?
scale3d6161 No3348 No ?
scaleNonUniform6161 No3348 No ?
skewX6161 No3348 No ?
skewY6161 No3348 No ?
toFloat32Array6161 No3348 No ?
toFloat64Array6161 No3348 No ?
toJSON6161 No3348 No ?
toString6161 No3348 No ?
transform6161 No3348 No ?
transformPoint6161 No3348 No ?

See also

Document Tags and Contributors

Last updated by: connorshea,