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