Geometry interfaces is a CSS module that provides interfaces for working with 3D and 2D graphics — in particular, for working with points, rectangles, quadrilaterals andtransformation 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 ofCSS Transforms, theCanvas API, theWebXR Device API, and (more directly)VideoFrame.visibleRect,Element.getClientRects(), andElement.getBoundingClientRect().

Interfaces

DOMMatrix

Represents atransformation 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 ofDOMMatrix.

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 ofDOMPoint.

DOMQuad

Represents a collection of fourDOMPoint objects defining the corners of aquadrilateral.

DOMRect

Represents the size and position of a rectangle.

DOMRectReadOnly

Read-only version ofDOMRect.

Examples

ThePath2D.addPath() andCanvasPattern.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