DOMMatrixReadOnly: fromMatrix() static method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
Note: This feature is available in Web Workers.
The fromMatrix() static method of the DOMMatrixReadOnly interface creates a new DOMMatrixReadOnly object given an existing matrix or an object which provides the values for its properties.
Syntax
DOMMatrixReadOnly.fromMatrix()
DOMMatrixReadOnly.fromMatrix(other)
Parameters
otherOptional-
A
DOMMatrix,DOMMatrixReadOnly, or an object with the same properties. All properties default to0. The properties are:is2D-
A boolean.
trueif the matrix should be created as a 2D matrix. Defaults tofalseif at least one ofm13,m14,m23,m24,m31,m32,m34, orm43is non-zero, or at least one ofm33orm44is not 1; otherwise, defaults totrue. m11,m12,m13,m14,m21,m22,m23,m24,m31,m32,m33,m34,m41,m42,m43,m44-
Numbers representing each component of a 4×4 matrix, where
m11throughm14are the first column,m21throughm24are the second column, and so forth.m11,m22,m33, andm44default to1, and all other components default to0.If
is2Dis explicitly set totrue,m13,m14,m23,m24,m31,m32,m34, orm43must either be omitted or set to0, andm33andm44must either be omitted or set to1. a,b,c,d,e,f-
Aliases for
m11,m12,m21,m22,m41, andm42, respectively, for convenience when initializing 2D matrices. If these aliases are provided with themcounterparts, their values must be equal.
Return value
A DOMMatrixReadOnly object.
Exceptions
TypeError-
Thrown if the provided object's properties are inconsistent (for example, if both
aandm11are provided but have different values).
Examples
>Creating a matrix from an object
This example creates a DOMMatrixReadOnly by providing matrix values in an object.
const matrix = DOMMatrixReadOnly.fromMatrix({
a: 1,
b: 0,
c: 0,
d: 1,
e: 50,
f: 50,
is2D: true,
});
console.log(matrix.toString());
// Output: matrix(1, 0, 0, 1, 50, 50)
console.log(matrix.is2D);
// Output: true
Creating a matrix from an existing matrix
This example creates a new DOMMatrixReadOnly from an existing DOMMatrixReadOnly.
const matrix1 = new DOMMatrixReadOnly([1, 0, 0, 1, 100, 100]);
const matrix2 = DOMMatrixReadOnly.fromMatrix(matrix1);
console.log(matrix2.toString());
// Output: matrix(1, 0, 0, 1, 100, 100)
Creating a default identity matrix
This example shows how calling fromMatrix() with no arguments creates an identity matrix.
const identityMatrix = DOMMatrixReadOnly.fromMatrix();
console.log(identityMatrix.toString());
// Output: matrix(1, 0, 0, 1, 0, 0)
console.log(identityMatrix.isIdentity);
// Output: true
Specifications
| Specification |
|---|
| Geometry Interfaces Module Level 1> # dom-dommatrixreadonly-frommatrix> |
Browser compatibility
Loading…