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
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 | |||||||||||
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 | |||||||||||
api.DOMPoint
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
DOMPoint | |||||||||||
DOMPoint() constructor | |||||||||||
fromPoint() static method | |||||||||||
w | |||||||||||
Available in workers | |||||||||||
x | |||||||||||
y | |||||||||||
z | |||||||||||
api.DOMPointReadOnly
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
DOMPointReadOnly | |||||||||||
DOMPointReadOnly() constructor | |||||||||||
fromPoint() static method | |||||||||||
matrixTransform() | |||||||||||
toJSON() | |||||||||||
w | |||||||||||
Available in workers | |||||||||||
x | |||||||||||
y | |||||||||||
z | |||||||||||
api.DOMQuad
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
DOMQuad | |||||||||||
DOMQuad() constructor | |||||||||||
fromQuad() static method | |||||||||||
fromRect() static method | |||||||||||
getBounds() | |||||||||||
p1 | |||||||||||
p2 | |||||||||||
p3 | |||||||||||
p4 | |||||||||||
toJSON() | |||||||||||
Available in workers | |||||||||||
api.DOMRect
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
DOMRect | |||||||||||
DOMRect() constructor | |||||||||||
fromRect() static method | |||||||||||
height | |||||||||||
width | |||||||||||
Available in workers | |||||||||||
x | |||||||||||
y | |||||||||||
api.DOMRectReadOnly
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
DOMRectReadOnly | |||||||||||
DOMRectReadOnly() constructor | |||||||||||
bottom | |||||||||||
fromRect() static method | |||||||||||
height | |||||||||||
left | |||||||||||
right | |||||||||||
toJSON | |||||||||||
top | |||||||||||
width | |||||||||||
Available in workers | |||||||||||
x | |||||||||||
y | |||||||||||
See also
Path2D.addPath()CanvasPattern.setTransform()CanvasRenderingContext2D.getTransform()CanvasRenderingContext2D.setTransform()CSSTransformValue.toMatrix()CSSTransformComponent.toMatrix()Element.getBoundingClientRect()Element.getClientRects()VideoFrame.visibleRectXRLightEstimateXRRigidTransform