Geometry interfaces

Geometry interfaces is a CSS module that provides interfaces for working with 3D and 2D graphics — in particular, for working with points, rectangles, quadrilaterals and transformation matrices (for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing those operations).

As a web developer, you don't always use the geometry interfaces directly, but instead use other features that rely on them behind the scenes: parts of CSS Transforms, the Canvas API, the WebXR Device API, and (more directly) VideoFrame.visibleRect, Element.getClientRects(), and Element.getBoundingClientRect().

Interfaces

DOMMatrix

Represents a transformation matrix, for operations that translate/move, scale, rotate, skew/shear/slant, and flip graphics, as well as for multiplying/chaining and inverting/undoing those operations.

DOMMatrixReadOnly

Read-only version of DOMMatrix.

DOMPoint

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.

DOMQuad

Represents a collection of four DOMPoint objects defining the corners of a quadrilateral.

DOMRect

Represents the size and position of a rectangle.

DOMRectReadOnly

Read-only version of DOMRect.

Examples

The Path2D.addPath() and CanvasPattern.setTransform() articles have examples that use some of the geometry interfaces.

Specifications

Specification
Geometry Interfaces Module Level 1
# DOMMatrix
Geometry Interfaces Module Level 1
# DOMPoint
Geometry Interfaces Module Level 1
# DOMQuad
Geometry Interfaces Module Level 1
# DOMRect

Browser compatibility

api.DOMMatrix

BCD tables only load in the browser

api.DOMMatrixReadOnly

BCD tables only load in the browser

api.DOMPoint

BCD tables only load in the browser

api.DOMQuad

BCD tables only load in the browser

api.DOMRect

BCD tables only load in the browser

api.DOMRectReadOnly

BCD tables only load in the browser

See also