JavaScript DOMMatrix : DOMMatrixReadOnly

constructor

Spec

Constructors

new DOMMatrix() : DOMMatrix

Constructs new 2D identity matrix.

Example:

console.log(new DOMMatrix());

Run

Results:

Spec

new DOMMatrix(cssTransform : String) : DOMMatrix

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 DOMMatrix('scale(2)'));
console.log(new DOMMatrix('translate(3px, 4px)'));
console.log(new DOMMatrix('rotate(30deg)'));
console.log();

// Can combine multiple. Note order matters.
console.log(new DOMMatrix('scale(5) translate(6px, 7px)'));
console.log(new DOMMatrix('translate(6px, 7px) scale(5)'));
console.log();

// '3d' versions
console.log(new DOMMatrix('translate3d(8px, 9px, 10px)'));
console.log(new DOMMatrix('rotate3d(1, 0, 0, 30deg)'));

Run

Results:

Spec

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

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 DOMMatrix('scale(2)'));
console.log(new DOMMatrix([2, 0, 0, 2, 0, 0]));
console.log(DOMMatrix.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 DOMMatrix('scale3d(2, 2, 2)'));
console.log(new DOMMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1]));
console.log(DOMMatrix.fromMatrix({ m11: 2, m22: 2, m33: 2 }));

Run

Results:

Spec

Instance Properties

a : Number

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.a);
console.log(matrix2D.m11);
console.log();


const matrix3D = new DOMMatrix([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

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.b);
console.log(matrix2D.m12);
console.log();


const matrix3D = new DOMMatrix([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

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.c);
console.log(matrix2D.m21);
console.log();


const matrix3D = new DOMMatrix([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

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.d);
console.log(matrix2D.m22);
console.log();


const matrix3D = new DOMMatrix([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

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.e);
console.log(matrix2D.m41);
console.log();


const matrix3D = new DOMMatrix([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

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.f);
console.log(matrix2D.m42);
console.log();


const matrix3D = new DOMMatrix([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:

m11 : Number

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.a);
console.log(matrix2D.m11);
console.log();


const matrix3D = new DOMMatrix([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

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.b);
console.log(matrix2D.m12);
console.log();


const matrix3D = new DOMMatrix([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

Returns the m13 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m13);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m13);

Run

Results:

m14 : Number

Returns the m14 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m14);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m14);

Run

Results:

m21 : Number

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.c);
console.log(matrix2D.m21);
console.log();


const matrix3D = new DOMMatrix([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

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.d);
console.log(matrix2D.m22);
console.log();


const matrix3D = new DOMMatrix([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

Returns the m23 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m23);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m23);

Run

Results:

m24 : Number

Returns the m24 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m24);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m24);

Run

Results:

m31 : Number

Returns the m31 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m31);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m31);

Run

Results:

m32 : Number

Returns the m32 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m32);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m32);

Run

Results:

m33 : Number

Returns the m33 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m33);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m33);

Run

Results:

m34 : Number

Returns the m14 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m34);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m34);

Run

Results:

m41 : Number

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.e);
console.log(matrix2D.m41);
console.log();


const matrix3D = new DOMMatrix([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

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

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.f);
console.log(matrix2D.m42);
console.log();


const matrix3D = new DOMMatrix([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

Returns the m43 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m43);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m43);

Run

Results:

m44 : Number

Returns the m44 element of the matrix.

Example:

const matrix2D = new DOMMatrix([0, 1, 2, 3, 4, 5]);

console.log(matrix2D.m44);
console.log();


const matrix3D = new DOMMatrix([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

console.log(matrix3D.m44);

Run

Results:

Instance Methods

invertSelf() : DOMMatrix

multiplySelf 2 variants

multiplySelf([matrix : Object]) : DOMMatrix

Same as multiyply(fromMatrix(matrix)).

multiplySelf([matrix : DOMMatrixReadOnly]) : DOMMatrix

preMultiplySelf 2 variants

preMultiplySelf([matrix : Object]) : DOMMatrix

Same as preMultiyply(fromMatrix(matrix)).

preMultiplySelf([matrix : DOMMatrixReadOnly]) : DOMMatrix

rotateAxisAngleSelf([x = 0 : Number, [y = 0 : Number, [z = 0 : Number, [degrees = 0 : Number]]]]) : DOMMatrix

rotateFromVectorSelf([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 this.rotateSelf(Math.atan2(y, x) * 180 / Math.PI). Return this.

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 matrix1 = new DOMMatrix().rotateFromVectorSelf(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 = new DOMMatrix().rotateSelf(Math.atan2(-1, 2) * 180 / Math.PI);
  console.log(matrix1);
  console.log(matrix2);
</script>

Run

Results:

rotateSelf 2 variants

rotateSelf([degreesX = 0 : Number, [degreesY = 0 : Number, [degreesZ = 0 : Number]]]) : DOMMatrix

Applies the specfied rotation to this. Returns this.

rotateSelf(degreesZ = 0 : Number) : DOMMatrix

Applies the specfied rotation to this. Returns this.

scale3DSelf([scale = 1 : Number, [originX = 0 : Number, [originY = 0 : Number, [originZ = 0 : Number]]]]) : DOMMatrix

Applies the specfied scale to this. Returns this.

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

Applies the specfied scale to this. Returns this.

setValue(cssTransform : String) : DOMMatrix

skewXSelf([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 DOMMatrix().skewXSelf(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 DOMMatrix().skewYSelf(45);

  context.setTransform(matrix);

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

Run

Results:

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

Applies the specfied translation to this. Returns this.

Example:

const matrix = new DOMMatrix();

console.log(matrix.translateSelf(2, 3));
console.log(matrix);

Run

Results:

DOMMatrix Methods

fromFloat32Array(values : Float32Array) : DOMMatrix

fromFloat64Array(values : Float64Array) : DOMMatrix

fromMatrix 2 variants

fromMatrix([matrix : DOMMatrixReadOnly]) : DOMMatrix

fromMatrix(init : Object) : DOMMatrixReadOnly

home license contribute feedback