Geometry Interfaces Module API
interface DOMMatrix
The DOMMatrix interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the DOMMatrixReadOnly interface. The interface is available inside web workers.
| m11 m21 m31 m41 |
| m12 m22 m32 m42 |
| m13 m23 m33 m43 |
| m14 m24 m34 m44 |
Properties
Methods
The invertSelf() method of the DOMMatrix interface inverts the original matrix. If the matrix cannot be inverted, the new matrix's components are all set to NaN and its is2D property is set to false.
multiplySelf(other?: DOMMatrixInit): DOMMatrix The multiplySelf() method of the DOMMatrix interface multiplies a matrix by the otherMatrix parameter, computing the dot product of the original matrix and the specified matrix: A⋅B. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. These have the default value of 1.
preMultiplySelf(other?: DOMMatrixInit): DOMMatrix The preMultiplySelf() method of the DOMMatrix interface modifies the matrix by pre-multiplying it with the specified DOMMatrix. This is equivalent to the dot product B⋅A, where matrix A is the source matrix and B is the matrix given as an input to the method. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. These have the default value of 1.
rotateAxisAngleSelf(
x?: number,
y?: number,
z?: number,
angle?: number,
): DOMMatrix The rotateAxisAngleSelf() method of the DOMMatrix interface is a transformation method that rotates the source matrix by the given vector and angle, returning the altered matrix.
rotateFromVectorSelf(
x?: number,
y?: number,
): DOMMatrix The rotateFromVectorSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix by rotating the matrix by the angle between the specified vector and (1, 0). The rotation angle is determined by the angle between the vector (1,0)T and (x,y)T in the clockwise direction, or (+/-)arctan(y/x). If x and y are both 0, the angle is specified as 0, and the matrix is not altered.
rotateSelf(
rotX?: number,
rotY?: number,
rotZ?: number,
): DOMMatrix The rotateSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It rotates the source matrix around each of its axes by the specified number of degrees and returns the rotated matrix.
scale3dSelf(
scale?: number,
originX?: number,
originY?: number,
originZ?: number,
): DOMMatrix The scale3dSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix by applying a specified scaling factor to all three axes, centered on the given origin, with a default origin of (0, 0, 0), returning the 3D-scaled matrix.
scaleSelf(
scaleX?: number,
scaleY?: number,
scaleZ?: number,
originX?: number,
originY?: number,
originZ?: number,
): DOMMatrix The scaleSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix by applying a specified scaling factor, centered on the given origin, with a default origin of (0, 0), returning the scaled matrix.
setMatrixValue(transformList: string): DOMMatrix The setMatrixValue() method of the DOMMatrix interface replaces the contents of the matrix with the matrix described by the specified transform or transforms, returning itself.
The skewXSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It skews the source matrix by applying the specified skew transformation along the X-axis and returns the skewed matrix.
The skewYSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It skews the source matrix by applying the specified skew transformation along the Y-axis and returns the skewed matrix.
translateSelf(
tx?: number,
ty?: number,
tz?: number,
): DOMMatrix The translateSelf() method of the DOMMatrix interface is a mutable transformation method that modifies a matrix. It applies the specified vectors and returns the updated matrix. The default vector is [0, 0, 0].
variable DOMMatrix
The DOMMatrix interface represents 4×4 matrices, suitable for 2D and 3D operations including rotation and translation. It is a mutable version of the DOMMatrixReadOnly interface. The interface is available inside web workers.
| m11 m21 m31 m41 |
| m12 m22 m32 m42 |
| m13 m23 m33 m43 |
| m14 m24 m34 m44 |
Properties
Methods
fromFloat32Array(array32: Float32Array<ArrayBuffer>): DOMMatrix The fromFloat32Array() static method of the DOMMatrix interface creates a new DOMMatrix object given an array of single-precision (32-bit) floating-point values.
fromFloat64Array(array64: Float64Array<ArrayBuffer>): DOMMatrix The fromFloat64Array() static method of the DOMMatrix interface creates a new DOMMatrix object given an array of double-precision (64-bit) floating-point values.
fromMatrix(other?: DOMMatrixInit): DOMMatrix The fromMatrix() static method of the DOMMatrix interface creates a new DOMMatrix object given an existing matrix or an object which provides the values for its properties.
interface DOMMatrixReadOnly
The DOMMatrixReadOnly interface represents a read-only 4×4 matrix, suitable for 2D and 3D operations. The DOMMatrix interface — which is based upon DOMMatrixReadOnly—adds mutability, allowing you to alter the matrix after creating it.
| m11 m21 m31 m41 |
| m12 m22 m32 m42 |
| m13 m23 m33 m43 |
| m14 m24 m34 m44 |
Properties
a: number b: number c: number d: number e: number f: number is2D: boolean The readonly is2D property of the DOMMatrixReadOnly interface is a Boolean flag that is true when the matrix is 2D. The value is true if the matrix was initialized as a 2D matrix and only 2D transformation operations were applied. Otherwise, the matrix is defined in 3D, and is2D is false.
isIdentity: boolean The readonly isIdentity property of the DOMMatrixReadOnly interface is a Boolean whose value is true if the matrix is the identity matrix.
m11: number m12: number m13: number m14: number m21: number m22: number m23: number m24: number m31: number m32: number m33: number m34: number m41: number m42: number m43: number m44: number Methods
The flipX() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix flipped about the x-axis. This is equivalent to multiplying the matrix by DOMMatrix(-1, 0, 0, 1, 0, 0). The original matrix is not modified.
The flipY() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix flipped about the y-axis. This is equivalent to multiplying the matrix by DOMMatrix(1, 0, 0, -1, 0, 0). The original matrix is not modified.
The inverse() method of the DOMMatrixReadOnly interface creates a new matrix which is the inverse of the original matrix. If the matrix cannot be inverted, the new matrix's components are all set to NaN and its is2D property is set to false. The original matrix is not changed.
multiply(other?: DOMMatrixInit): DOMMatrix The multiply() method of the DOMMatrixReadOnly interface creates and returns a new matrix which is the dot product of the matrix and the otherMatrix parameter. If otherMatrix is omitted, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. These have the default value of 1. The original matrix is not modified.
The rotate() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by rotating the source matrix around each of its axes by the specified number of degrees. The original matrix is not altered.
rotateAxisAngle(
x?: number,
y?: number,
z?: number,
angle?: number,
): DOMMatrix The rotateAxisAngle() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by rotating the source matrix by the given vector and angle. The original matrix is not altered.
rotateFromVector(
x?: number,
y?: number,
): DOMMatrix The rotateFromVector() method of the DOMMatrixReadOnly interface is returns a new DOMMatrix created by rotating the source matrix by the angle between the specified vector and (1, 0). The rotation angle is determined by the angle between the vector (1,0)T and (x,y)T in the clockwise direction, or (+/-)arctan(y/x). If x and y are both 0, the angle is specified as 0. The original matrix is not altered.
scale(
scaleX?: number,
scaleY?: number,
scaleZ?: number,
originX?: number,
originY?: number,
originZ?: number,
): DOMMatrix The scale() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix with a scale transform applied.
The scale3d() method of the DOMMatrixReadOnly interface creates a new matrix which is the result of a 3D scale transform being applied to the matrix. It returns a new DOMMatrix created by scaling the source 3d matrix by the given scale factor centered on the origin point specified by the origin parameters, with a default origin of (0, 0, 0). The original matrix is not modified.
scaleNonUniform(
scaleX?: number,
scaleY?: number,
): DOMMatrix The skewX() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by applying the specified skew transformation to the source matrix along its x-axis. The original matrix is not modified.
The skewY() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by applying the specified skew transformation to the source matrix along its y-axis. The original matrix is not modified.
toFloat32Array(): Float32Array<ArrayBuffer> The toFloat32Array() method of the DOMMatrixReadOnly interface returns a new Float32Array containing all 16 elements (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) which comprise the matrix. The elements are stored into the array as single-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)
toFloat64Array(): Float64Array<ArrayBuffer> The toFloat64Array() method of the DOMMatrixReadOnly interface returns a new Float64Array containing all 16 elements (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) which comprise the matrix. The elements are stored into the array as double-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)
toJSON(): any The toJSON() method of the DOMMatrixReadOnly interface creates and returns a JSON object. The JSON object includes the 2D matrix elements a through f, the 16 elements of the 4X4 3D matrix, m[1-4][1-4], the boolean is2D property, and the boolean isIdentity property.
transformPoint(point?: DOMPointInit): DOMPoint The transformPoint method of the DOMMatrixReadOnly interface creates a new DOMPoint object, transforming a specified point by the matrix. Neither the matrix nor the original point are altered.
The translate() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix with a translation applied.
toString(): string variable DOMMatrixReadOnly
The DOMMatrixReadOnly interface represents a read-only 4×4 matrix, suitable for 2D and 3D operations. The DOMMatrix interface — which is based upon DOMMatrixReadOnly—adds mutability, allowing you to alter the matrix after creating it.
| m11 m21 m31 m41 |
| m12 m22 m32 m42 |
| m13 m23 m33 m43 |
| m14 m24 m34 m44 |
Properties
Methods
fromFloat32Array(array32: Float32Array<ArrayBuffer>): DOMMatrixReadOnly The fromFloat32Array() static method of the DOMMatrixReadOnly interface creates a new DOMMatrixReadOnly object given an array of single-precision (32-bit) floating-point values.
fromFloat64Array(array64: Float64Array<ArrayBuffer>): DOMMatrixReadOnly The fromFloat64Array() static method of the DOMMatrixReadOnly interface creates a new DOMMatrixReadOnly object given an array of double-precision (64-bit) floating-point values.
fromMatrix(other?: DOMMatrixInit): DOMMatrixReadOnly The fromMatrix() static method of the DOMMatrixReadOnly interface creates a new DOMMatrixReadOnly object given an existing matrix or an object which provides the values for its properties.
interface DOMPoint
A DOMPoint object represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value. DOMPoint is based on DOMPointReadOnly but allows its properties' values to be changed.
Properties
w: number The DOMPoint interface's w property holds the point's perspective value, w, for a point in space.
x: number The DOMPoint interface's x property holds the horizontal coordinate, x, for a point in space.
y: number The DOMPoint interface's y property holds the vertical coordinate, y, for a point in space.
z: number The DOMPoint interface's z property specifies the depth coordinate of a point in space.
variable DOMPoint
A DOMPoint object represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value. DOMPoint is based on DOMPointReadOnly but allows its properties' values to be changed.
Properties
Methods
fromPoint(other?: DOMPointInit): DOMPoint The fromPoint() static method of the DOMPoint interface creates and returns a new mutable DOMPoint object given a source point.
interface DOMPointInit
interface DOMPointReadOnly
The DOMPointReadOnly interface specifies the coordinate and perspective fields used by DOMPoint to define a 2D or 3D point in a coordinate system.
Properties
w: number The DOMPointReadOnly interface's w property holds the point's perspective value, w, for a read-only point in space.
x: number The DOMPointReadOnly interface's x property holds the horizontal coordinate, x, for a read-only point in space. This property cannot be changed by JavaScript code in this read-only version of the DOMPoint object.
y: number The DOMPointReadOnl**y** interface's y property holds the vertical coordinate, y, for a read-only point in space.
z: number The DOMPointReadOnly interface's z property holds the depth coordinate, z, for a read-only point in space.
Methods
matrixTransform(matrix?: DOMMatrixInit): DOMPoint The matrixTransform() method of the DOMPointReadOnly interface applies a matrix transform specified as an object to the DOMPointReadOnly object, creating and returning a new DOMPointReadOnly object. Neither the matrix nor the point are altered.
toJSON(): any The DOMPointReadOnly method toJSON() returns an object giving the JSON form of the point object.
variable DOMPointReadOnly
The DOMPointReadOnly interface specifies the coordinate and perspective fields used by DOMPoint to define a 2D or 3D point in a coordinate system.
Properties
Methods
fromPoint(other?: DOMPointInit): DOMPointReadOnly The static DOMPointReadOnly method fromPoint() creates and returns a new DOMPointReadOnly object given a source point.
interface DOMQuad
A DOMQuad is a collection of four DOMPoints defining the corners of an arbitrary quadrilateral. Returning DOMQuads lets getBoxQuads() return accurate information even when arbitrary 2D or 3D transforms are present. It has a handy bounds attribute returning a DOMRectReadOnly for those cases where you just want an axis-aligned bounding rectangle.
Properties
The DOMQuad interface's p1 property holds the DOMPoint object that represents one of the four corners of the DOMQuad. When created from DOMQuad.fromRect(), it is the point (x, y).
The DOMQuad interface's p2 property holds the DOMPoint object that represents one of the four corners of the DOMQuad. When created from DOMQuad.fromRect(), it is the point (x + width, y).
The DOMQuad interface's p3 property holds the DOMPoint object that represents one of the four corners of the DOMQuad. When created from DOMQuad.fromRect(), it is the point (x + width, y + height).
The DOMQuad interface's p4 property holds the DOMPoint object that represents one of the four corners of the DOMQuad. When created from DOMQuad.fromRect(), it is the point (x, y + height).
Methods
The DOMQuad method getBounds() returns a DOMRect object representing the smallest rectangle that fully contains the DOMQuad object.
toJSON(): any The DOMQuad method toJSON() returns a JSON representation of the DOMQuad object.
variable DOMQuad
A DOMQuad is a collection of four DOMPoints defining the corners of an arbitrary quadrilateral. Returning DOMQuads lets getBoxQuads() return accurate information even when arbitrary 2D or 3D transforms are present. It has a handy bounds attribute returning a DOMRectReadOnly for those cases where you just want an axis-aligned bounding rectangle.
Properties
Methods
fromQuad(other?: DOMQuadInit): DOMQuad The fromQuad() static method of the DOMQuad interface returns a new DOMQuad object based on the provided set of coordinates in the shape of another DOMQuad object.
fromRect(other?: DOMRectInit): DOMQuad The fromRect() static method of the DOMQuad interface returns a new DOMQuad object based on the provided set of coordinates in the shape of a DOMRect object.
interface DOMQuadInit
Properties
p1: DOMPointInit p2: DOMPointInit p3: DOMPointInit p4: DOMPointInit interface DOMRect
A DOMRect describes the size and position of a rectangle.
Properties
height: number The height property of the DOMRect interface represents the height of the rectangle. The value can be negative.
width: number The width property of the DOMRect interface represents the width of the rectangle. The value can be negative.
x: number The x property of the DOMRect interface represents the x-coordinate of the rectangle, which is the horizontal distance between the viewport's left edge and the rectangle's origin.
y: number The y property of the DOMRect interface represents the y-coordinate of the rectangle, which is the vertical distance between the viewport's top edge and the rectangle's origin.
variable DOMRect
A DOMRect describes the size and position of a rectangle.
Properties
Methods
fromRect(other?: DOMRectInit): DOMRect The fromRect() static method of the DOMRect object creates a new DOMRect object with a given location and dimensions.
interface DOMRectInit
interface DOMRectReadOnly
The DOMRectReadOnly interface specifies the standard properties (also used by DOMRect) to define a rectangle whose properties are immutable.
Properties
bottom: number The bottom read-only property of the DOMRectReadOnly interface returns the bottom coordinate value of the DOMRect. (Has the same value as y + height, or y if height is negative.)
height: number The height read-only property of the DOMRectReadOnly interface represents the height of the DOMRect.
left: number The left read-only property of the DOMRectReadOnly interface returns the left coordinate value of the DOMRect. (Has the same value as x, or x + width if width is negative.)
right: number The right read-only property of the DOMRectReadOnly interface returns the right coordinate value of the DOMRect. (Has the same value as x + width, or x if width is negative.)
top: number The top read-only property of the DOMRectReadOnly interface returns the top coordinate value of the DOMRect. (Has the same value as y, or y + height if height is negative.)
width: number The width read-only property of the DOMRectReadOnly interface represents the width of the DOMRect.
x: number The x read-only property of the DOMRectReadOnly interface represents the x coordinate of the DOMRect's origin.
y: number The y read-only property of the DOMRectReadOnly interface represents the y coordinate of the DOMRect's origin.
Methods
toJSON(): any The DOMRectReadOnly method toJSON() returns a JSON representation of the DOMRectReadOnly object.
variable DOMRectReadOnly
The DOMRectReadOnly interface specifies the standard properties (also used by DOMRect) to define a rectangle whose properties are immutable.
Properties
Methods
fromRect(other?: DOMRectInit): DOMRectReadOnly The fromRect() static method of the DOMRectReadOnly object creates a new DOMRectReadOnly object with a given location and dimensions.
© 2018–2025 the Deno authors
Licensed under the MIT License.
https://docs.deno.com/api/web/geometry-interfaces-module-api
