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.

DOMPointReadOnly

Read-only version of DOMPoint.

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

Browser compatibility

api.DOMMatrix

api.DOMMatrixReadOnly

api.DOMPoint

api.DOMPointReadOnly

api.DOMQuad

api.DOMRect

api.DOMRectReadOnly

See also

• Path2D.addPath()
• CanvasPattern.setTransform()
• CanvasRenderingContext2D.getTransform()
• CanvasRenderingContext2D.setTransform()
• CSSTransformValue.toMatrix()
• CSSTransformComponent.toMatrix()
• Element.getBoundingClientRect()
• Element.getClientRects()
• VideoFrame.visibleRect
• XRLightEstimate
• XRRigidTransform