x scale
y skew
x skew
y scale
x translation
y translation
Scale on the x axis.
Array representation of the matrix.
Only populated when toArray() is called.
Matrix.toArray For filling this array
Shear on the y axis.
Shear on the x axis.
Scale on the y axis.
Translation on the x axis.
Translation on the y axis.
StaticIDENTITYA default (identity) matrix with no transformations applied.
This is a shared read-only object. Create a new Matrix if you need to modify it.
A read-only identity matrix
// Get identity matrix reference
const identity = Matrix.IDENTITY;
console.log(identity.isIdentity()); // true
// Compare with identity
const matrix = new Matrix();
console.log(matrix.equals(Matrix.IDENTITY)); // true
// Create new matrix instead of modifying IDENTITY
const transform = new Matrix()
.copyFrom(Matrix.IDENTITY)
.translate(100, 100);
StaticsharedA static Matrix that can be used to avoid creating new objects. Will always ensure the matrix is reset to identity when requested.
This matrix is shared and temporary. Do not store references to it.
A fresh identity matrix for temporary use
// Use for temporary calculations
const tempMatrix = Matrix.shared;
tempMatrix.translate(100, 100).rotate(Math.PI / 4);
const point = tempMatrix.apply({ x: 10, y: 20 });
// Will be reset to identity on next access
const fresh = Matrix.shared; // Back to identity
Appends the given Matrix to this Matrix. Combines two matrices by multiplying them together: this = this * matrix
The matrix to append
This matrix. Good for chaining method calls.
// Basic matrix combination
const matrix = new Matrix();
const other = new Matrix().translate(100, 0).rotate(Math.PI / 4);
matrix.append(other);
Appends two matrices and sets the result to this matrix. Performs matrix multiplication: this = A * B
This matrix. Good for chaining method calls.
// Basic matrix multiplication
const result = new Matrix();
const matrixA = new Matrix().scale(2, 2);
const matrixB = new Matrix().rotate(Math.PI / 4);
result.appendFrom(matrixA, matrixB);
Get a new position with the current transformation applied.
Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering)
The transformed point
// Basic point transformation
const matrix = new Matrix().translate(100, 50).rotate(Math.PI / 4);
const point = new Point(10, 20);
const transformed = matrix.apply(point);
// Reuse existing point
const output = new Point();
matrix.apply(point, output);
Get a new position with the inverse of the current transformation applied.
Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input)
The inverse-transformed point
// Basic inverse transformation
const matrix = new Matrix().translate(100, 50).rotate(Math.PI / 4);
const worldPoint = new Point(150, 100);
const localPoint = matrix.applyInverse(worldPoint);
// Reuse existing point
const output = new Point();
matrix.applyInverse(worldPoint, output);
// Convert mouse position to local space
const mousePoint = new Point(mouseX, mouseY);
const localMouse = matrix.applyInverse(mousePoint);
Creates a new Matrix object with the same values as this one.
A copy of this matrix. Good for chaining method calls.
Changes the values of the matrix to be the same as the ones in given matrix.
The matrix to copy from
This matrix. Good for chaining method calls.
// Basic matrix copying
const source = new Matrix()
.translate(100, 100)
.rotate(Math.PI / 4);
const target = new Matrix();
target.copyFrom(source);
Creates a new Matrix object with the same values as this one.
A copy of this matrix. Good for chaining method calls.
// Basic matrix cloning
const matrix = new Matrix()
.translate(100, 100)
.rotate(Math.PI / 4);
const copy = matrix.clone();
// Clone and modify
const modified = matrix.clone()
.scale(2, 2);
// Compare matrices
console.log(matrix.equals(copy)); // true
console.log(matrix.equals(modified)); // false
Decomposes the matrix into its individual transform components. Extracts position, scale, rotation and skew values from the matrix.
The transform object to store the decomposed values
The transform with the newly applied properties
// Basic decomposition
const matrix = new Matrix()
.translate(100, 100)
.rotate(Math.PI / 4)
.scale(2, 2);
const transform = {
position: new Point(),
scale: new Point(),
pivot: new Point(),
skew: new Point(),
rotation: 0
};
matrix.decompose(transform);
console.log(transform.position); // Point(100, 100)
console.log(transform.rotation); // ~0.785 (PI/4)
console.log(transform.scale); // Point(2, 2)
Checks if this matrix equals another matrix. Compares all components for exact equality.
The matrix to compare to
True if matrices are identical
// Basic equality check
const m1 = new Matrix();
const m2 = new Matrix();
console.log(m1.equals(m2)); // true
// Compare transformed matrices
const transform = new Matrix()
.translate(100, 100)
const clone = new Matrix()
.scale(2, 2);
console.log(transform.equals(clone)); // false
Creates a Matrix object based on the given array. Populates matrix components from a flat array in column-major order.
Array mapping order:
array[0] = a (x scale)
array[1] = b (y skew)
array[2] = tx (x translation)
array[3] = c (x skew)
array[4] = d (y scale)
array[5] = ty (y translation)
The array to populate the matrix from
// Create matrix from array
const matrix = new Matrix();
matrix.fromArray([
2, 0, 100, // a, b, tx
0, 2, 100 // c, d, ty
]);
// Create matrix from typed array
const float32Array = new Float32Array([
1, 0, 0, // Scale x1, no skew
0, 1, 0 // No skew, scale x1
]);
matrix.fromArray(float32Array);
Resets this Matrix to an identity (default) matrix. Sets all components to their default values: scale=1, no skew, no translation.
This matrix. Good for chaining method calls.
// Reset transformed matrix
const matrix = new Matrix()
.scale(2, 2)
.rotate(Math.PI / 4);
matrix.identity(); // Back to default state
// Chain after reset
matrix
.identity()
.translate(100, 100)
.scale(2, 2);
// Compare with identity constant
const isDefault = matrix.equals(Matrix.IDENTITY);
Inverts this matrix. Creates the matrix that when multiplied with this matrix results in an identity matrix.
This matrix. Good for chaining method calls.
// Basic matrix inversion
const matrix = new Matrix()
.translate(100, 50)
.scale(2, 2);
matrix.invert(); // Now transforms in opposite direction
// Verify inversion
const point = new Point(50, 50);
const transformed = matrix.apply(point);
const original = matrix.invert().apply(transformed);
// original ≈ point
Checks if this matrix is an identity matrix.
An identity matrix has no transformations applied (default state).
True if matrix has no transformations
// Check if matrix is identity
const matrix = new Matrix();
console.log(matrix.isIdentity()); // true
// Check after transformations
matrix.translate(100, 0);
console.log(matrix.isIdentity()); // false
// Reset and verify
matrix.identity();
console.log(matrix.isIdentity()); // true
Prepends the given Matrix to this Matrix. Combines two matrices by multiplying them together: this = matrix * this
The matrix to prepend
This matrix. Good for chaining method calls.
// Basic matrix prepend
const matrix = new Matrix().scale(2, 2);
const other = new Matrix().translate(100, 0);
matrix.prepend(other); // Translation happens before scaling
Applies a rotation transformation to the matrix.
Rotates around the origin (0,0) by the given angle in radians.
The angle in radians
This matrix. Good for chaining method calls.
// Basic rotation
const matrix = new Matrix();
matrix.rotate(Math.PI / 4); // Rotate 45 degrees
// Chain with other transformations
matrix
.translate(100, 100) // Move to rotation center
.rotate(Math.PI) // Rotate 180 degrees
.scale(2, 2); // Scale after rotation
// Common angles
matrix.rotate(Math.PI / 2); // 90 degrees
matrix.rotate(Math.PI); // 180 degrees
matrix.rotate(Math.PI * 2); // 360 degrees
Applies a scale transformation to the matrix. Multiplies the scale values with existing matrix components.
The amount to scale horizontally
The amount to scale vertically
This matrix. Good for chaining method calls.
// Basic scaling
const matrix = new Matrix();
matrix.scale(2, 3); // Scale 2x horizontally, 3x vertically
// Chain with other transformations
matrix
.translate(100, 100)
.scale(2, 2) // Scales after translation
.rotate(Math.PI / 4);
Sets the matrix properties directly. All matrix components can be set in one call.
Scale on x axis
Shear on y axis
Shear on x axis
Scale on y axis
Translation on x axis
Translation on y axis
This matrix. Good for chaining method calls.
// Set to identity matrix
matrix.set(1, 0, 0, 1, 0, 0);
// Set to scale matrix
matrix.set(2, 0, 0, 2, 0, 0); // Scale 2x
// Set to translation matrix
matrix.set(1, 0, 0, 1, 100, 50); // Move 100,50
Sets the matrix based on all the available properties. Combines position, scale, rotation, skew and pivot in a single operation.
Position on the x axis
Position on the y axis
Pivot on the x axis
Pivot on the y axis
Scale on the x axis
Scale on the y axis
Rotation in radians
Skew on the x axis
Skew on the y axis
This matrix. Good for chaining method calls.
// Basic transform setup
const matrix = new Matrix();
matrix.setTransform(
100, 100, // position
0, 0, // pivot
2, 2, // scale
Math.PI / 4, // rotation (45 degrees)
0, 0 // skew
);
Creates an array from the current Matrix object.
The array format is:
Non-transposed:
[a, c, tx,
b, d, ty,
0, 0, 1]
Transposed:
[a, b, 0,
c, d, 0,
tx,ty,1]
Optionaltranspose: booleanWhether to transpose the matrix
Optionalout: Float32ArrayOptional Float32Array to store the result
The array containing the matrix values
// Basic array conversion
const matrix = new Matrix(2, 0, 0, 2, 100, 100);
const array = matrix.toArray();
// Using existing array
const float32Array = new Float32Array(9);
matrix.toArray(false, float32Array);
// Get transposed array
const transposed = matrix.toArray(true);
Translates the matrix on the x and y axes. Adds to the position values while preserving scale, rotation and skew.
How much to translate on the x axis
How much to translate on the y axis
This matrix. Good for chaining method calls.
// Basic translation
const matrix = new Matrix();
matrix.translate(100, 50); // Move right 100, down 50
// Chain with other transformations
matrix
.scale(2, 2)
.translate(100, 0)
.rotate(Math.PI / 4);
A fast matrix for 2D transformations. Represents a 3x3 transformation matrix:
Example
Remarks