DOMMatrixReadOnly : Object

constructor

A 4x4 matrix.

Constructors

new DOMMatrixReadOnly() : DOMMatrixReadOnly

Constructs new 2D identity matrix.

Example:

console.log(new DOMMatrixReadOnly());

Run

Results:

Spec

new DOMMatrixReadOnly(cssTransform : String) : DOMMatrixReadOnly

Constructs a new matrix using the specified cssTransform. The syntax for this string is the same as for the css transform property.

Example:

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)'));

Run

Results:

Spec

new DOMMatrixReadOnly(values : Iterator<Number>) : DOMMatrixReadOnly

values must have either 6 or 16 elements in it.

If 6 elements are specified (a, b, ..., f), the matrix will be a 2D matrix constructed like:

`a`	`c`	`e`
`b`	`d`	`f`
`0`	`0`	`1`

Example:

// 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 }));

Run

Results:

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`

Example:

// 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 }));

Run

Results:

Instance Properties

a : Number readonly

Returns the a element of the matrix. This is the same as the m11 element.

Example:

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);

Run

Results:

b : Number readonly

Returns the b element of the matrix. This is the same as the m12 element.

Example:

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);

Run

Results:

c : Number readonly

Returns the c element of the matrix. This is the same as the m21 element.

Example:

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);

Run

Results:

d : Number readonly

Returns the d element of the matrix. This is the same as the m22 element.

Example:

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);

Run

Results:

e : Number readonly

Returns the e element of the matrix. This is the same as the m41 element.

Example:

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);

Run

Results:

f : Number readonly

Returns the f element of the matrix. This is the same as the m42 element.

Example:

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);

Run

Results:

is2D : Boolean readonly

Indicates this was created with one of the 2D constructors.

Example:

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);

Run

Results:

Spec

isIdentity : Boolean readonly

true if this is an identity matrix (diagonal elements are 1, rest are 0).

Example:

console.log(new DOMMatrixReadOnly().isIdentity);
console.log(new DOMMatrixReadOnly([1, 0, 0, 1, 0, 0]).isIdentity);
console.log(new DOMMatrixReadOnly('scale(2)').isIdentity);

Run

Results:

Spec

m11 : Number readonly

Returns the m11 element of the matrix. This is the same as the a element.

Example:

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);

Run

Results:

m12 : Number readonly

Returns the m12 element of the matrix. This is the same as the b element.

Example:

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);

Run

Results:

m13 : Number readonly

Returns the m13 element of the matrix.

Example:

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);

Run

Results:

m14 : Number readonly

Returns the m14 element of the matrix.

Example:

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);

Run

Results:

m21 : Number readonly

Returns the m21 element of the matrix. This is the same as the c element.

Example:

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);

Run

Results:

m22 : Number readonly

Returns the m22 element of the matrix. This is the same as the d element.

Example:

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);

Run

Results:

m23 : Number readonly

Returns the m23 element of the matrix.

Example:

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);

Run

Results:

m24 : Number readonly

Returns the m24 element of the matrix.

Example:

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);

Run

Results:

m31 : Number readonly

Returns the m31 element of the matrix.

Example:

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);

Run

Results:

m32 : Number readonly

Returns the m32 element of the matrix.

Example:

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);

Run

Results:

m33 : Number readonly

Returns the m33 element of the matrix.

Example:

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);

Run

Results:

m34 : Number readonly

Returns the m14 element of the matrix.

Example:

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);

Run

Results:

m41 : Number readonly

Returns the m41 element of the matrix. This is the same as the e element.

Example:

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);

Run

Results:

m42 : Number readonly

Returns the m42 element of the matrix. This is the same as the f element.

Example:

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);

Run

Results:

m43 : Number readonly

Returns the m43 element of the matrix.

Example:

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);

Run

Results:

m44 : Number readonly

Returns the m44 element of the matrix.

Example:

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);

Run

Results:

Instance Methods

flipX() : DOMMatrix

flipY() : DOMMatrix

inverse() : DOMMatrix

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillStyle = 'red';
  context.fillRect(20, 20, 20, 40);

  var identity = new DOMMatrixReadOnly();
  var matrix1 = identity.rotateFromVector(2, -1);

  context.setTransform(matrix1);

  context.fillStyle = 'blue';
  context.fillRect(20, 20, 20, 40);

  // Alternatively, calculate the angle using atan2 and convert to degrees.
  var matrix2 = identity.rotate(Math.atan2(-1, 2) * 180 / Math.PI);
  console.log(matrix1);
  console.log(matrix2);
</script>

Run

Results:

scale([scaleX = 1 : Number, [scaleY = scaleX : Number, [scaleZ = 1 : Number, [originX = 0 : Number, [originY = 0 : Number, [originZ = 0 : Number]]]]]]) : DOMMatrix

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillStyle = 'red';
  context.fillRect(20, 20, 20, 40);

  var matrix = new DOMMatrixReadOnly();
  matrix = matrix.skewX(45);

  context.setTransform(matrix);

  context.fillStyle = 'blue';
  context.fillRect(20, 20, 20, 40);
</script>

Run

Results:

skewY([degrees = 0 : Number]) : DOMMatrix

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillStyle = 'red';
  context.fillRect(20, 20, 20, 40);

  var matrix = new DOMMatrixReadOnly();
  matrix = matrix.skewY(45);

  context.setTransform(matrix);

  context.fillStyle = 'blue';
  context.fillRect(20, 20, 20, 40);
</script>

Run

Results:

toFloat32Array() : Float32Array

toFloat64Array() : Float64Array

transformPoint 2 variants

transformPoint([point : DOMPointReadOnly]) : DOMPoint

transformPoint(point : Object) : DOMPoint

Same as transformPoint(fromPoint(Point)).

translate([x : Number, [y : Number, [z : Number]]]) : DOMMatrix

Returns a new DOMMatrix of this followed by the specified translation. If this is 2D and z is specified, the return value will be a 3D matrix. Otherwise it will be a 2D matrix. See also DOMMatrix.translateSelf().

Example:

const matrix = new DOMMatrixReadOnly();

console.log(matrix.translate(2, 3));
console.log(matrix.translate(2, 3, 4));

Run

Results:

DOMMatrixReadOnly Methods

fromFloat32Array(values : Float32Array) : DOMMatrixReadOnly

fromFloat64Array(values : Float64Array) : DOMMatrixReadOnly

fromMatrix 2 variants

fromMatrix([matrix : DOMMatrixReadOnly]) : DOMMatrixReadOnly

fromMatrix(init : Object) : DOMMatrixReadOnly

home license contribute feedback toggle light/dark mode