Geometry interfaces
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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
DOMPointobjects 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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMMatrix
|
|
|
|
|
|
|
|
|
|
|
|
|
DOMMatrix() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
a
|
|
|
|
|
|
|
|
|
|
|
|
|
b
|
|
|
|
|
|
|
|
|
|
|
|
|
c
|
|
|
|
|
|
|
|
|
|
|
|
|
d
|
|
|
|
|
|
|
|
|
|
|
|
|
e
|
|
|
|
|
|
|
|
|
|
|
|
|
f
|
|
|
|
|
|
|
|
|
|
|
|
|
fromFloat32Array() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
fromFloat64Array() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
fromMatrix() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
invertSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
m11
|
|
|
|
|
|
|
|
|
|
|
|
|
m12
|
|
|
|
|
|
|
|
|
|
|
|
|
m13
|
|
|
|
|
|
|
|
|
|
|
|
|
m14
|
|
|
|
|
|
|
|
|
|
|
|
|
m21
|
|
|
|
|
|
|
|
|
|
|
|
|
m22
|
|
|
|
|
|
|
|
|
|
|
|
|
m23
|
|
|
|
|
|
|
|
|
|
|
|
|
m24
|
|
|
|
|
|
|
|
|
|
|
|
|
m31
|
|
|
|
|
|
|
|
|
|
|
|
|
m32
|
|
|
|
|
|
|
|
|
|
|
|
|
m33
|
|
|
|
|
|
|
|
|
|
|
|
|
m34
|
|
|
|
|
|
|
|
|
|
|
|
|
m41
|
|
|
|
|
|
|
|
|
|
|
|
|
m42
|
|
|
|
|
|
|
|
|
|
|
|
|
m43
|
|
|
|
|
|
|
|
|
|
|
|
|
m44
|
|
|
|
|
|
|
|
|
|
|
|
|
multiplySelf
|
|
|
|
|
|
|
|
|
|
|
|
|
preMultiplySelf
|
|
|
|
|
|
|
|
|
|
|
|
|
rotateAxisAngleSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
rotateFromVectorSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
rotateSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
scale3dSelf()
|
|
|
|
|
|
|
|
|
|
|
|
|
scaleSelf()
|
|
|
|
|
|
|
|
|
|
|
|
|
setMatrixValue
|
|
|
|
|
|
|
|
|
|
|
|
|
skewXSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
skewYSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
translateSelf
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Available in workers
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Uses a non-standard name
- Has more compatibility info.
api.DOMMatrixReadOnly
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMMatrixReadOnly
|
|
|
|
|
|
|
|
|
|
|
|
|
DOMMatrixReadOnly() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
a
|
|
|
|
|
|
|
|
|
|
|
|
|
b
|
|
|
|
|
|
|
|
|
|
|
|
|
c
|
|
|
|
|
|
|
|
|
|
|
|
|
d
|
|
|
|
|
|
|
|
|
|
|
|
|
e
|
|
|
|
|
|
|
|
|
|
|
|
|
f
|
|
|
|
|
|
|
|
|
|
|
|
|
flipX()
|
|
|
|
|
|
|
|
|
|
|
|
|
flipY()
|
|
|
|
|
|
|
|
|
|
|
|
|
fromFloat32Array() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
fromFloat64Array() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
fromMatrix() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
inverse()
|
|
|
|
|
|
|
|
|
|
|
|
|
is2D
|
|
|
|
|
|
|
|
|
|
|
|
|
isIdentity
|
|
|
|
|
|
|
|
|
|
|
|
|
m11
|
|
|
|
|
|
|
|
|
|
|
|
|
m12
|
|
|
|
|
|
|
|
|
|
|
|
|
m13
|
|
|
|
|
|
|
|
|
|
|
|
|
m14
|
|
|
|
|
|
|
|
|
|
|
|
|
m21
|
|
|
|
|
|
|
|
|
|
|
|
|
m22
|
|
|
|
|
|
|
|
|
|
|
|
|
m23
|
|
|
|
|
|
|
|
|
|
|
|
|
m24
|
|
|
|
|
|
|
|
|
|
|
|
|
m31
|
|
|
|
|
|
|
|
|
|
|
|
|
m32
|
|
|
|
|
|
|
|
|
|
|
|
|
m33
|
|
|
|
|
|
|
|
|
|
|
|
|
m34
|
|
|
|
|
|
|
|
|
|
|
|
|
m41
|
|
|
|
|
|
|
|
|
|
|
|
|
m42
|
|
|
|
|
|
|
|
|
|
|
|
|
m43
|
|
|
|
|
|
|
|
|
|
|
|
|
m44
|
|
|
|
|
|
|
|
|
|
|
|
|
multiply()
|
|
|
|
|
|
|
|
|
|
|
|
|
rotate()
|
|
|
|
|
|
|
|
|
|
|
|
|
rotateAxisAngle()
|
|
|
|
|
|
|
|
|
|
|
|
|
rotateFromVector()
|
|
|
|
|
|
|
|
|
|
|
|
|
scale()
|
|
|
|
|
|
|
|
|
|
|
|
|
scale3d()
|
|
|
|
|
|
|
|
|
|
|
|
|
scaleNonUniform()
|
|
|
|
|
|
|
|
|
|
|
|
|
skewX()
|
|
|
|
|
|
|
|
|
|
|
|
|
skewY()
|
|
|
|
|
|
|
|
|
|
|
|
|
toFloat32Array()
|
|
|
|
|
|
|
|
|
|
|
|
|
toFloat64Array()
|
|
|
|
|
|
|
|
|
|
|
|
|
toJSON()
|
|
|
|
|
|
|
|
|
|
|
|
|
toString()
|
|
|
|
|
|
|
|
|
|
|
|
|
transformPoint()
|
|
|
|
|
|
|
|
|
|
|
|
|
translate()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Available in workers
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Deprecated. Not for use in new websites.
- See implementation notes.
api.DOMPoint
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMPoint
|
|
|
|
|
|
|
|
|
|
|
|
|
DOMPoint() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
fromPoint() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
w
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Available in workers
|
|
|
|
|
|
|
|
|
|
|
|
|
x
|
|
|
|
|
|
|
|
|
|
|
|
|
y
|
|
|
|
|
|
|
|
|
|
|
|
|
z
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
api.DOMPointReadOnly
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMPointReadOnly
|
|
|
|
|
|
|
|
|
|
|
|
|
DOMPointReadOnly() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
fromPoint() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
matrixTransform()
|
|
|
|
|
|
|
|
|
|
|
|
|
toJSON()
|
|
|
|
|
|
|
|
|
|
|
|
|
w
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Available in workers
|
|
|
|
|
|
|
|
|
|
|
|
|
x
|
|
|
|
|
|
|
|
|
|
|
|
|
y
|
|
|
|
|
|
|
|
|
|
|
|
|
z
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
api.DOMQuad
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMQuad
|
|
|
|
|
|
|
|
|
|
|
|
|
DOMQuad() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
fromQuad() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
fromRect() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
getBounds()
|
|
|
|
|
|
|
|
|
|
|
|
|
p1
|
|
|
|
|
|
|
|
|
|
|
|
|
p2
|
|
|
|
|
|
|
|
|
|
|
|
|
p3
|
|
|
|
|
|
|
|
|
|
|
|
|
p4
|
|
|
|
|
|
|
|
|
|
|
|
|
toJSON()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Available in workers
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
api.DOMRect
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMRect
|
|
|
|
|
|
|
|
|
|
|
|
|
DOMRect() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
fromRect() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
height
|
|
|
|
|
|
|
|
|
|
|
|
|
width
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Available in workers
|
|
|
|
|
|
|
|
|
|
|
|
|
x
|
|
|
|
|
|
|
|
|
|
|
|
|
y
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name
- Has more compatibility info.
api.DOMRectReadOnly
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMRectReadOnly
|
|
|
|
|
|
|
|
|
|
|
|
|
DOMRectReadOnly() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
bottom
|
|
|
|
|
|
|
|
|
|
|
|
|
fromRect() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
height
|
|
|
|
|
|
|
|
|
|
|
|
|
left
|
|
|
|
|
|
|
|
|
|
|
|
|
right
|
|
|
|
|
|
|
|
|
|
|
|
|
toJSON
|
|
|
|
|
|
|
|
|
|
|
|
|
top
|
|
|
|
|
|
|
|
|
|
|
|
|
width
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Available in workers
|
|
|
|
|
|
|
|
|
|
|
|
|
x
|
|
|
|
|
|
|
|
|
|
|
|
|
y
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name
- Has more compatibility info.
See also
Path2D.addPath()CanvasPattern.setTransform()CanvasRenderingContext2D.getTransform()CanvasRenderingContext2D.setTransform()CSSTransformValue.toMatrix()CSSTransformComponent.toMatrix()Element.getBoundingClientRect()Element.getClientRects()VideoFrame.visibleRectXRLightEstimateXRRigidTransform