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

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
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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()
Deprecated
skewX()
skewY()
toFloat32Array()
toFloat64Array()
toJSON()
toString()
transformPoint()
translate()
Available in workers

api.DOMPoint

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMPoint
DOMPoint() constructor
fromPoint() static method
w
Available in workers
x
y
z

api.DOMPointReadOnly

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMPointReadOnly
DOMPointReadOnly() constructor
fromPoint() static method
matrixTransform()
toJSON()
w
Available in workers
x
y
z

api.DOMQuad

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMQuad
DOMQuad() constructor
fromQuad() static method
fromRect() static method
getBounds()
p1
p2
p3
p4
toJSON()
Available in workers

api.DOMRect

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMRect
DOMRect() constructor
fromRect() static method
height
width
Available in workers
x
y

api.DOMRectReadOnly

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMRectReadOnly
DOMRectReadOnly() constructor
bottom
fromRect() static method
height
left
right
toJSON
top
width
Available in workers
x
y

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`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