W3cubDocs

/Web APIs

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 6152 79121212–79 33491.5 4815≤12.1 1154 611818 33494 4814≤12.1 1143 8.01.01.0 614.44.4 1143
Geometry_interfaces 6152 79121212–79 33491.5 4815≤12.1 1154 611818 33494 4814≤12.1 1143 8.01.01.0 614.44.4 1143
a 61 79 33 48 11 61 33 45 11 8.0 61 11
b 61 79 33 48 11 61 33 45 11 8.0 61 11
c 61 79 33 48 11 61 33 45 11 8.0 61 11
d 61 79 33 48 11 61 33 45 11 8.0 61 11
e 61 79 33 48 11 61 33 45 11 8.0 61 11
f 61 79 33 48 11 61 33 45 11 8.0 61 11
fromFloat32Array_static 61 79 69 48 11 61 79 45 11 8.0 61 11
fromFloat64Array_static 61 79 69 48 11 61 79 45 11 8.0 61 11
fromMatrix_static 61 79 69 48 11 61 79 45 11 8.0 61 11
invertSelf 61 79 33 48 11 61 33 45 11 8.0 61 11
m11 61 79 33 48 11 61 33 45 11 8.0 61 11
m12 61 79 33 48 11 61 33 45 11 8.0 61 11
m13 61 79 33 48 11 61 33 45 11 8.0 61 11
m14 61 79 33 48 11 61 33 45 11 8.0 61 11
m21 61 79 33 48 11 61 33 45 11 8.0 61 11
m22 61 79 33 48 11 61 33 45 11 8.0 61 11
m23 61 79 33 48 11 61 33 45 11 8.0 61 11
m24 61 79 33 48 11 61 33 45 11 8.0 61 11
m31 61 79 33 48 11 61 33 45 11 8.0 61 11
m32 61 79 33 48 11 61 33 45 11 8.0 61 11
m33 61 79 33 48 11 61 33 45 11 8.0 61 11
m34 61 79 33 48 11 61 33 45 11 8.0 61 11
m41 61 79 33 48 11 61 33 45 11 8.0 61 11
m42 61 79 33 48 11 61 33 45 11 8.0 61 11
m43 61 79 33 48 11 61 33 45 11 8.0 61 11
m44 61 79 33 48 11 61 33 45 11 8.0 61 11
multiplySelf 61 79 33 48 11 61 33 45 11 8.0 61 11
preMultiplySelf 61 79 33 48 11 61 33 45 11 8.0 61 11
rotateAxisAngleSelf 61 79 33 48 11 61 33 45 11 8.0 61 11
rotateFromVectorSelf 61 79 33 48 11 61 33 45 11 8.0 61 11
rotateSelf 61 79 33 48 11 61 33 45 11 8.0 61 11
scale3dSelf 61 79
33Starting in Firefox 69, the first parameter (scale) is now optional with a default value of 1, per the specification. Previously it was required.
 48 11 61
33Starting in Firefox for Android 79, the first parameter (scale) is now optional with a default value of 1, per the specification. Previously it was required.
 45 11 8.0 61 11
scaleSelf 61 79
33Firefox 69 introduced support for the modern six-parameter syntax for scaleSelf(). Previously, it only supported the older three-parameter syntax: scale(scaleX[, originX][, originY]]]).
 48 11 61
33Firefox for Android 79 introduced support for the modern six-parameter syntax for scaleSelf(). Previously, it only supported the older three-parameter syntax: scale(scaleX[, originX][, originY]]]).
 45 11 8.0 61 11
setMatrixValue 61 79 33 48 11 61 33 45 11 8.0 61 11
skewXSelf 61 79 33 48 11 61 33 45 11 8.0 61 11
skewYSelf 61 79 33 48 11 61 33 45 11 8.0 61 11
translateSelf 61 79 33 48 11 61 33 45 11 8.0 61 11
worker_support 61 79 69 48 11 61 79 45 11 8.0 61 11

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 61 79 62 48 11 61 62 45 11 8.0 61 11
Geometry_interfaces 61 79 33 48 11 61 33 45 11 8.0 61 11
a 61 79 33 48 11 61 33 45 11 8.0 61 11
b 61 79 33 48 11 61 33 45 11 8.0 61 11
c 61 79 33 48 11 61 33 45 11 8.0 61 11
d 61 79 33 48 11 61 33 45 11 8.0 61 11
e 61 79 33 48 11 61 33 45 11 8.0 61 11
f 61 79 33 48 11 61 33 45 11 8.0 61 11
flipX 61 79 33 48 11 61 33 45 11 8.0 61 11
flipY 61 79 33 48 11 61 33 45 11 8.0 61 11
fromFloat32Array_static 61 79 69 48 11 61 79 45 11 8.0 61 11
fromFloat64Array_static 61 79 69 48 11 61 79 45 11 8.0 61 11
fromMatrix_static 61 79 69 48 11 61 79 45 11 8.0 61 11
inverse 61 79 33 48 11 61 33 45 11 8.0 61 11
is2D 61 79 33 48 11 61 33 45 11 8.0 61 11
isIdentity 61 79 59 48 11 61 59 45 11 8.0 61 11
m11 61 79 33 48 11 61 33 45 11 8.0 61 11
m12 61 79 33 48 11 61 33 45 11 8.0 61 11
m13 61 79 33 48 11 61 33 45 11 8.0 61 11
m14 61 79 33 48 11 61 33 45 11 8.0 61 11
m21 61 79 33 48 11 61 33 45 11 8.0 61 11
m22 61 79 33 48 11 61 33 45 11 8.0 61 11
m23 61 79 33 48 11 61 33 45 11 8.0 61 11
m24 61 79 33 48 11 61 33 45 11 8.0 61 11
m31 61 79 33 48 11 61 33 45 11 8.0 61 11
m32 61 79 33 48 11 61 33 45 11 8.0 61 11
m33 61 79 33 48 11 61 33 45 11 8.0 61 11
m34 61 79 33 48 11 61 33 45 11 8.0 61 11
m41 61 79 33 48 11 61 33 45 11 8.0 61 11
m42 61 79 33 48 11 61 33 45 11 8.0 61 11
m43 61 79 33 48 11 61 33 45 11 8.0 61 11
m44 61 79 33 48 11 61 33 45 11 8.0 61 11
multiply 61 79 33 48 11 61 33 45 11 8.0 61 11
rotate 61 79 33 48 11 61 33 45 11 8.0 61 11
rotateAxisAngle 61 79 33 48 11 61 33 45 11 8.0 61 11
rotateFromVector 61 79 33 48 11 61 33 45 11 8.0 61 11
scale 61 79
33Firefox 69 introduced support for the modern six-parameter syntax for scale(). Previously, it only supported the older three-parameter syntax: scale(scaleX[, originX][, originY]]]).
 48 11 61
33Firefox for Android 79 introduced support for the modern six-parameter syntax for scale(). Previously, it only supported the older three-parameter syntax: scale(scaleX[, originX][, originY]]]).
 45 11 8.0 61 11
scale3d 61 79
33Starting in Firefox 69, the first parameter (scale) is now optional with a default value of 1, per the specification. Previously it was required.
 48 11 61
33Starting in Firefox for Android 79, the first parameter (scale) is now optional with a default value of 1, per the specification. Previously it was required.
 45 11 8.0 61 11
scaleNonUniform 73 79 33 60 17.4 73 33 52 17.4 11.0 73 17.4
skewX 61 79
33Before Firefox 69, the sx parameter was required; you may now call skewX() with no inputs. A value of 0 is correctly assumed.
 48 11 61
33Before Firefox for Android 79, the sx parameter was required; you may now call skewX() with no inputs. A value of 0 is correctly assumed.
 45 11 8.0 61 11
skewY 61 79
33Before Firefox 69, the sy parameter was required; you may now call skewY() with no inputs. A value of 0 is correctly assumed.
 48 11 61
33Before Firefox for Android 79, the sy parameter was required; you may now call skewY() with no inputs. A value of 0 is correctly assumed.
 45 11 8.0 61 11
toFloat32Array 61 79 33 48 11 61 33 45 11 8.0 61 11
toFloat64Array 61 79 33 48 11 61 33 45 11 8.0 61 11
toJSON 61 79 62 48 11 61 62 45 11 8.0 61 11
toString 61 79 33 48 11 61 33 45 11 8.0 61 11
transformPoint 61 79 33 48 11 61 33 45 11 8.0 61 11
translate 61 79 33 48 11 61 33 45 11 8.0 61 11
worker_support 61 79 69 48 11 61 79 45 11 8.0 61 11

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 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
Geometry_interfaces 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
fromPoint_static 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3
w 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
worker_support 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3
x 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
y 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
z 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3

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 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3
Geometry_interfaces 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
fromPoint_static 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3
matrixTransform 61 79 69 48 11 61 79 45 11 8.0 61 11
toJSON 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3
w 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
worker_support 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3
x 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
y 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
z 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3

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 61 79 31 48 11 61 31 45 11 8.0 61 11
Geometry_interfaces 61 79 31 48 11 61 31 45 11 8.0 61 11
fromQuad_static 61 79 69 48 11 61 79 45 11 8.0 61 11
fromRect_static 61 79 69 48 11 61 79 45 11 8.0 61 11
getBounds 61 79 62 48 11 61 62 45 11 8.0 61 11
p1 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 48 11 61
31Before Firefox for Android 79, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 45 11 8.0 61 11
p2 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 48 11 61
31Before Firefox for Android 79, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 45 11 8.0 61 11
p3 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 48 11 61
31Before Firefox for Android 79, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 45 11 8.0 61 11
p4 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 48 11 61
31Before Firefox for Android 79, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
 45 11 8.0 61 11
toJSON 61 79 62 48 11 61 62 45 11 8.0 61 11
worker_support 61 79 69 48 11 61 79 45 11 8.0 61 11

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 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
Geometry_interfaces 612–61 7912–79 273–27 489.5–48 10.14–11 6118–61 274–27 4510.1–45 10.33.2–11 8.01.0–8.0 612–61 10.33.2–11
fromRect_static 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3
height 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2
width 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2
worker_support 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3
x 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
y 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3

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 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3
Geometry_interfaces 612–61 7912–79 3127–313–27 489.5–48 10.14–11 6118–61 3127–314–27 4510.1–45 10.33.2–11 8.01.0–8.0 612–61 10.33.2–11
bottom 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2
fromRect_static 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3
height 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2
left 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2
right 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2
toJSON 61 79 62 48 10.1 61 62 45 10.3 8.0 61 10.3
top 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2
width 2 12 3 9.5 4 18 4 10.1 3.2 1.0 2 3.2
worker_support 61 79 69 48 10.1 61 79 45 10.3 8.0 61 10.3
x 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3
y 61 79 31 48 10.1 61 31 45 10.3 8.0 61 10.3

See also

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces