DOMMatrixReadOnly : Object
A 4x4 matrix.
Spec:
https://drafts.fxtf.org/geometry-1/#dommatrixreadonly
----
new DOMMatrixReadOnly() : DOMMatrixReadOnly
Constructs new %%#is2D|2D%% %%#isIdentity|identity%% matrix.
console.log(new DOMMatrixReadOnly());
Spec:
https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly-dommatrixreadonly
----
new DOMMatrixReadOnly(cssTransform : String) : DOMMatrixReadOnly
Constructs a new matrix using the specified **cssTransform**. The syntax for
this string is the same as for the %%/CSSStyleDeclaration#transform|css transform%%
property.
console.log(new DOMMatrixReadOnly('scale(2)'));
console.log(new DOMMatrixReadOnly('translate(3px, 4px)'));
console.log(new DOMMatrixReadOnly('rotate(30deg)'));
console.log();
// Can combine multiple. Note order matters.
console.log(new DOMMatrixReadOnly('scale(5) translate(6px, 7px)'));
console.log(new DOMMatrixReadOnly('translate(6px, 7px) scale(5)'));
console.log();
// '3d' versions
console.log(new DOMMatrixReadOnly('translate3d(8px, 9px, 10px)'));
console.log(new DOMMatrixReadOnly('rotate3d(1, 0, 0, 30deg)'));
Spec:
https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly-dommatrixreadonly
----
new DOMMatrixReadOnly(values : Iterator) : DOMMatrixReadOnly
**values** must have either **6** or **16** elements in it.
If **6** elements are specified (**a**, **b**, ..., **f**), the matrix will be a
%%#is2D|2D%% matrix constructed like:
**a** | **c** | **e** |
**b** | **d** | **f** |
**0** | **0** | **1** |
// The following are equivalent:
console.log(new DOMMatrixReadOnly('scale(2)'));
console.log(new DOMMatrixReadOnly([2, 0, 0, 2, 0, 0]));
console.log(DOMMatrixReadOnly.fromMatrix({ a: 2, d: 2 }));
If **16** elements are specified (**m11**, **m12**, **m13**, **m14**, **m21**, **m22**,
..., **m44**), the matrix will be a 3D matrix constructed like:
**m11** | **m12** | **m13** | **m14** |
**m21** | **m22** | **m23** | **m24** |
**m31** | **m32** | **m33** | **m34** |
**m41** | **m42** | **m43** | **m44** |
// The following are equivalent:
console.log(new DOMMatrixReadOnly('scale3d(2, 2, 2)'));
console.log(new DOMMatrixReadOnly([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1]));
console.log(DOMMatrixReadOnly.fromMatrix({ m11: 2, m22: 2, m33: 2 }));
----
instance.a : Number
Returns the **a** element of the matrix. This is the same as the %%#m11|**m11**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.a);
console.log(matrix2D.m11);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.a);
console.log(matrix3D.m11);
ReadOnly:
true
----
instance.b : Number
Returns the **b** element of the matrix. This is the same as the %%#m12|**m12**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.b);
console.log(matrix2D.m12);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.b);
console.log(matrix3D.m12);
ReadOnly:
true
----
instance.c : Number
Returns the **c** element of the matrix. This is the same as the %%#m21|**m21**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.c);
console.log(matrix2D.m21);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.c);
console.log(matrix3D.m21);
ReadOnly:
true
----
instance.d : Number
Returns the **d** element of the matrix. This is the same as the %%#m22|**m22**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.d);
console.log(matrix2D.m22);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.d);
console.log(matrix3D.m22);
ReadOnly:
true
----
instance.e : Number
Returns the **e** element of the matrix. This is the same as the %%#m41|**m41**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.e);
console.log(matrix2D.m41);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.e);
console.log(matrix3D.m41);
ReadOnly:
true
----
instance.f : Number
Returns the **f** element of the matrix. This is the same as the %%#m42|**m42**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.f);
console.log(matrix2D.m42);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.f);
console.log(matrix3D.m42);
ReadOnly:
true
----
instance.m11 : Number
Returns the **m11** element of the matrix. This is the same as the %%#a|**a**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.a);
console.log(matrix2D.m11);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.a);
console.log(matrix3D.m11);
ReadOnly:
true
----
instance.m12 : Number
Returns the **m12** element of the matrix. This is the same as the %%#b|**b**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.b);
console.log(matrix2D.m12);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.b);
console.log(matrix3D.m12);
ReadOnly:
true
----
instance.m13 : Number
Returns the **m13** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m13);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m13);
ReadOnly:
true
----
instance.m14 : Number
Returns the **m14** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m14);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m14);
ReadOnly:
true
----
instance.m21 : Number
Returns the **m21** element of the matrix. This is the same as the %%#c|**c**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.c);
console.log(matrix2D.m21);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.c);
console.log(matrix3D.m21);
ReadOnly:
true
----
instance.m22 : Number
Returns the **m22** element of the matrix. This is the same as the %%#d|**d**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.d);
console.log(matrix2D.m22);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.d);
console.log(matrix3D.m22);
ReadOnly:
true
----
instance.m23 : Number
Returns the **m23** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m23);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m23);
ReadOnly:
true
----
instance.m24 : Number
Returns the **m24** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m24);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m24);
ReadOnly:
true
----
instance.m31 : Number
Returns the **m31** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m31);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m31);
ReadOnly:
true
----
instance.m32 : Number
Returns the **m32** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m32);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m32);
ReadOnly:
true
----
instance.m33 : Number
Returns the **m33** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m33);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m33);
ReadOnly:
true
----
instance.m34 : Number
Returns the **m14** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m34);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m34);
ReadOnly:
true
----
instance.m41 : Number
Returns the **m41** element of the matrix. This is the same as the %%#e|**e**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.e);
console.log(matrix2D.m41);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.e);
console.log(matrix3D.m41);
ReadOnly:
true
----
instance.m42 : Number
Returns the **m42** element of the matrix. This is the same as the %%#f|**f**%%
element.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.f);
console.log(matrix2D.m42);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.f);
console.log(matrix3D.m42);
ReadOnly:
true
----
instance.m43 : Number
Returns the **m43** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m43);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m43);
ReadOnly:
true
----
instance.m44 : Number
Returns the **m44** element of the matrix.
const matrix2D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5]);
console.log(matrix2D.m44);
console.log();
const matrix3D = new DOMMatrixReadOnly([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
console.log(matrix3D.m44);
ReadOnly:
true
----
instance.is2D : Boolean
Indicates **this** was created with one of the 2D constructors.
console.log(new DOMMatrixReadOnly().is2D);
console.log(new DOMMatrixReadOnly([1, 0, 0, 1, 0, 0]).is2D);
console.log(new DOMMatrixReadOnly('scale3d(2, 2, 2)').is2D);
ReadOnly:
true
Spec:
https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly-is2d
----
instance.isIdentity : Boolean
**true** if **this** is an identity matrix (diagonal elements are **1**, rest are **0**).
console.log(new DOMMatrixReadOnly().isIdentity);
console.log(new DOMMatrixReadOnly([1, 0, 0, 1, 0, 0]).isIdentity);
console.log(new DOMMatrixReadOnly('scale(2)').isIdentity);
ReadOnly:
true
Spec:
https://drafts.fxtf.org/geometry-1/#dom-dommatrixreadonly-isidentity
----
prototype.translate([x : Number, [y : Number, [z : Number]]]) : DOMMatrix
Returns a new DOMMatrix of **this** followed by the specified translation.
If **this** is %%#is2D|2D%% and **z** is specified, the return value will
be a 3D matrix. Otherwise it will be a 2D matrix.
See also %%DOMMatrix#translateSelf()|DOMMatrix.translateSelf()%%.
const matrix = new DOMMatrixReadOnly();
console.log(matrix.translate(2, 3));
console.log(matrix.translate(2, 3, 4));
----
prototype.scale([scaleX = 1 : Number, [scaleY = scaleX : Number, [scaleZ = 1 : Number, \
[originX = 0 : Number, [originY = 0 : Number, [originZ = 0 : Number]]]]]]) : DOMMatrix
See also %%DOMMatrix#scaleSelf()|DOMMatrix.scaleSelf()%%.
----
prototype.scaleNonUniform([scaleX = 1 : Number, [scaleY = 1 : Number]]) : DOMMatrix
----
prototype.scale3D([scale = 1 : Number, [originX = 0 : Number, [originY = 0 : Number, \
[originZ = 0 : Number]]]]) : DOMMatrix
See also %%DOMMatrix#scale3DSelf()|DOMMatrix.scale3DSelf()%%.
----
prototype.rotate(degreesZ = 0 : Number) : DOMMatrix
See also %%DOMMatrix#rotateSelf()|DOMMatrix.rotateSelf()%%.
----
prototype.rotate([degreesX = 0 : Number, [degreesY = 0 : Number, [degreesZ = 0 : Number]]]) : DOMMatrix
See also %%DOMMatrix#rotateSelf()|DOMMatrix.rotateSelf()%%.
----
prototype.rotateFromVector([x = 0 : Number, [y = 0 : Number]]) : DOMMatrix
Rotates **this** by the angle between the x axis and the vector from the origin
to the specified point (**x**, **y**). Same as
%%#rotate_Number|**this.rotate%%(%%Math#atan2|Math.atan2%%(y, x) * 180 / %%Math#PI|Math.PI%%)**.
See also %%DOMMatrix#rotateFromVectorSelf()|DOMMatrix.rotateFromVectorSelf()%%.
----
prototype.rotateAxisAngle([x = 0 : Number, [y = 0 : Number, [z = 0 : Number, [degrees = 0 : Number]]]]) : DOMMatrix
See also %%DOMMatrix#rotateAxisAngleSelf()|DOMMatrix.rotateAxisAngleSelf()%%.
----
prototype.skewX([degrees = 0 : Number]) : DOMMatrix
See also %%DOMMatrix#skewXSelf()|DOMMatrix.skewXSelf()%%.
----
prototype.skewY([degrees = 0 : Number]) : DOMMatrix
See also %%DOMMatrix#skewYSelf()|DOMMatrix.skewYSelf()%%.
----
prototype.multiply([matrix : Object]) : DOMMatrix
Same as **multiyply(%%#fromMatrix|fromMatrix(matrix)%%)**.
----
prototype.multiply([matrix : DOMMatrixReadOnly]) : DOMMatrix
See also %%DOMMatrix#multiplySelf()|DOMMatrix.multiplySelf()%%.
----
prototype.flipX() : DOMMatrix
----
prototype.flipY() : DOMMatrix
----
prototype.inverse() : DOMMatrix
See also %%DOMMatrix#invertSelf()|DOMMatrix.invertSelf()%%.
----
prototype.transformPoint(point : Object) : DOMPoint
Same as **transformPoint(%%DOMPointReadOnly#fromPoint|fromPoint(Point)%%)**.
----
prototype.transformPoint([point : DOMPointReadOnly]) : DOMPoint
----
prototype.toFloat32Array() : Float32Array
----
prototype.toFloat64Array() : Float64Array
----
fromMatrix(init : Object) : DOMMatrixReadOnly
----
fromMatrix([matrix : DOMMatrixReadOnly]) : DOMMatrixReadOnly
----
fromFloat32Array(values : Float32Array) : DOMMatrixReadOnly
----
fromFloat64Array(values : Float64Array) : DOMMatrixReadOnly