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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMRectReadOnly 61 79 62 No 48 10.1 61 61 62 45 10.3 8.0
Geometry_interfaces 612–61 7912–79 3127–313–27 4 489.5–48 10.14–11 612–61 6118–61 3127–314–27 4510.1–45 10.33.2–11 8.01.0–8.0
bottom 2 12 3 4 9.5 4 2 18 4 10.1 3.2 1.0
fromRect_static 61 79 69 No 48 10.1 61 61 79 45 10.3 8.0
height 2 12 3 4 9.5 4 2 18 4 10.1 3.2 1.0
left 2 12 3 4 9.5 4 2 18 4 10.1 3.2 1.0
right 2 12 3 4 9.5 4 2 18 4 10.1 3.2 1.0
toJSON 61 79 62 No 48 10.1 61 61 62 45 10.3 8.0
top 2 12 3 4 9.5 4 2 18 4 10.1 3.2 1.0
width 2 12 3 4 9.5 4 2 18 4 10.1 3.2 1.0
worker_support 61 79 69 No 48 10.1 61 61 No 45 10.3 8.0
x 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
y 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMRect 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
Geometry_interfaces 612–61 7912–79 273–27 4 489.5–48 10.14–11 612–61 6118–61 274–27 4510.1–45 10.33.2–11 8.01.0–8.0
fromRect_static 61 79 69 No 48 10.1 61 61 79 45 10.3 8.0
height 2 12 3 4 9.5 4 2 18 4 10.1 3.2 1.0
width 2 12 3 4 9.5 4 2 18 4 10.1 3.2 1.0
worker_support 61 79 69 No 48 10.1 61 61 No 45 10.3 8.0
x 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
y 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMQuad 61 79 31 No 48 11 61 61 31 45 11 8.0
Geometry_interfaces 61 79 31 No 48 11 61 61 31 45 11 8.0
fromQuad_static 61 79 69 No 48 11 61 61 79 45 11 8.0
fromRect_static 61 79 69 No 48 11 61 61 79 45 11 8.0
getBounds 61 79 62 No 48 11 61 61 62 45 11 8.0
p1 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
No 48 11 61 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
p2 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
No 48 11 61 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
p3 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
No 48 11 61 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
p4 61 79
31Before Firefox 69, the default value of p1 through p4 was undefined; now DOMQuadInit defines these as false.
No 48 11 61 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
toJSON 61 79 62 No 48 11 61 61 62 45 11 8.0
worker_support 61 79 69 No 48 11 61 61 79 45 11 8.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMPointReadOnly 61 79 62 No 48 10.1 61 61 62 45 10.3 8.0
Geometry_interfaces 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
fromPoint_static 61 79 62 No 48 10.1 61 61 62 45 10.3 8.0
matrixTransform 61 79 69 No 48 11 61 61 79 45 11 8.0
toJSON 61 79 62 No 48 10.1 61 61 62 45 10.3 8.0
w 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
worker_support 61 79 69 No 48 10.1 61 61 79 45 10.3 8.0
x 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
y 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
z 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMPoint 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
Geometry_interfaces 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
fromPoint_static 61 79 62 No 48 10.1 61 61 62 45 10.3 8.0
w 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
worker_support 61 79 69 No 48 10.1 61 61 No 45 10.3 8.0
x 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
y 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
z 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMMatrixReadOnly 61 79 62 No 48 11 61 61 62 45 11 8.0
Geometry_interfaces 61 79 33 No 48 11 61 61 33 45 11 8.0
a 61 79 33 No 48 11 61 61 33 45 11 8.0
b 61 79 33 No 48 11 61 61 33 45 11 8.0
c 61 79 33 No 48 11 61 61 33 45 11 8.0
d 61 79 33 No 48 11 61 61 33 45 11 8.0
e 61 79 33 No 48 11 61 61 33 45 11 8.0
f 61 79 33 No 48 11 61 61 33 45 11 8.0
flipX 61 79 33 No 48 11 61 61 33 45 11 8.0
flipY 61 79 33 No 48 11 61 61 33 45 11 8.0
fromFloat32Array_static 61 79 69 No 48 11 61 61 79 45 11 8.0
fromFloat64Array_static 61 79 69 No 48 11 61 61 79 45 11 8.0
fromMatrix_static 61 79 69 No 48 11 61 61 79 45 11 8.0
inverse 61 79 33 No 48 11 61 61 33 45 11 8.0
is2D 61 79 33 No 48 11 61 61 33 45 11 8.0
isIdentity 61 79 59 No 48 11 61 61 59 45 11 8.0
m11 61 79 33 No 48 11 61 61 33 45 11 8.0
m12 61 79 33 No 48 11 61 61 33 45 11 8.0
m13 61 79 33 No 48 11 61 61 33 45 11 8.0
m14 61 79 33 No 48 11 61 61 33 45 11 8.0
m21 61 79 33 No 48 11 61 61 33 45 11 8.0
m22 61 79 33 No 48 11 61 61 33 45 11 8.0
m23 61 79 33 No 48 11 61 61 33 45 11 8.0
m24 61 79 33 No 48 11 61 61 33 45 11 8.0
m31 61 79 33 No 48 11 61 61 33 45 11 8.0
m32 61 79 33 No 48 11 61 61 33 45 11 8.0
m33 61 79 33 No 48 11 61 61 33 45 11 8.0
m34 61 79 33 No 48 11 61 61 33 45 11 8.0
m41 61 79 33 No 48 11 61 61 33 45 11 8.0
m42 61 79 33 No 48 11 61 61 33 45 11 8.0
m43 61 79 33 No 48 11 61 61 33 45 11 8.0
m44 61 79 33 No 48 11 61 61 33 45 11 8.0
multiply 61 79 33 No 48 11 61 61 33 45 11 8.0
rotate 61 79 33 No 48 11 61 61 33 45 11 8.0
rotateAxisAngle 61 79 33 No 48 11 61 61 33 45 11 8.0
rotateFromVector 61 79 33 No 48 11 61 61 33 45 11 8.0
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]]]).
No 48 11 61 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
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.
No 48 11 61 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
scaleNonUniform 73 79 33 No 60 No 73 73 33 52 No 11.0
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.
No 48 11 61 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
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.
No 48 11 61 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
toFloat32Array 61 79 33 No 48 11 61 61 33 45 11 8.0
toFloat64Array 61 79 33 No 48 11 61 61 33 45 11 8.0
toJSON 61 79 62 No 48 11 61 61 62 45 11 8.0
toString 61 79 33 No 48 11 61 61 33 45 11 8.0
transformPoint 61 79 33 No 48 11 61 61 33 45 11 8.0
translate 61 79 33 No 48 11 61 61 33 45 11 8.0
worker_support 61 79 69 No 48 11 61 61 79 45 11 8.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMMatrix 6152 79121212–79 49331.5 11109 4815≤12.1 1154 614.44.4 611818 49334 4814≤12.1 1143 8.01.01.0
Geometry_interfaces 6152 79121212–79 49331.5 11109 4815≤12.1 1154 614.44.4 611818 49334 4814≤12.1 1143 8.01.01.0
a 61 79 33 No 48 11 61 61 33 45 11 8.0
b 61 79 33 No 48 11 61 61 33 45 11 8.0
c 61 79 33 No 48 11 61 61 33 45 11 8.0
d 61 79 33 No 48 11 61 61 33 45 11 8.0
e 61 79 33 No 48 11 61 61 33 45 11 8.0
f 61 79 33 No 48 11 61 61 33 45 11 8.0
fromFloat32Array_static 61 79 69 No 48 11 61 61 79 45 11 8.0
fromFloat64Array_static 61 79 69 No 48 11 61 61 79 45 11 8.0
fromMatrix_static 61 79 69 No 48 11 61 61 79 45 11 8.0
invertSelf 61 79 33 No 48 11 61 61 33 45 11 8.0
m11 61 79 33 No 48 11 61 61 33 45 11 8.0
m12 61 79 33 No 48 11 61 61 33 45 11 8.0
m13 61 79 33 No 48 11 61 61 33 45 11 8.0
m14 61 79 33 No 48 11 61 61 33 45 11 8.0
m21 61 79 33 No 48 11 61 61 33 45 11 8.0
m22 61 79 33 No 48 11 61 61 33 45 11 8.0
m23 61 79 33 No 48 11 61 61 33 45 11 8.0
m24 61 79 33 No 48 11 61 61 33 45 11 8.0
m31 61 79 33 No 48 11 61 61 33 45 11 8.0
m32 61 79 33 No 48 11 61 61 33 45 11 8.0
m33 61 79 33 No 48 11 61 61 33 45 11 8.0
m34 61 79 33 No 48 11 61 61 33 45 11 8.0
m41 61 79 33 No 48 11 61 61 33 45 11 8.0
m42 61 79 33 No 48 11 61 61 33 45 11 8.0
m43 61 79 33 No 48 11 61 61 33 45 11 8.0
m44 61 79 33 No 48 11 61 61 33 45 11 8.0
multiplySelf 61 79 33 No 48 11 61 61 33 45 11 8.0
preMultiplySelf 61 79 33 No 48 11 61 61 33 45 11 8.0
rotateAxisAngleSelf 61 79 33 No 48 11 61 61 33 45 11 8.0
rotateFromVectorSelf 61 79 33 No 48 11 61 61 33 45 11 8.0
rotateSelf 61 79 33 No 48 11 61 61 33 45 11 8.0
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.
No 48 11 61 61
33Firefox for Android requires the first parameter (scale).
45 11 8.0
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]]]).
No 48 11 61 61
33Firefox for Android only supports the older three-parameter syntax for scaleSelf(): scale(scaleX[, originX][, originY]]]), and not the six-parameter syntax.
45 11 8.0
setMatrixValue 61 79 33 No 48 11 61 61 33 45 11 8.0
skewXSelf 61 79 33 No 48 11 61 61 33 45 11 8.0
skewYSelf 61 79 33 No 48 11 61 61 33 45 11 8.0
translateSelf 61 79 33 No 48 11 61 61 33 45 11 8.0
worker_support 61 79 69 No 48 11 61 61 No 45 11 8.0

api.DOMMatrix

BCD tables only load in the browser

api.DOMMatrixReadOnly

BCD tables only load in the browser

api.DOMPoint

BCD tables only load in the browser

api.DOMPointReadOnly

BCD tables only load in the browser

api.DOMQuad

BCD tables only load in the browser

api.DOMRect

BCD tables only load in the browser

api.DOMRectReadOnly

BCD tables only load in the browser

See also

© 2005–2023 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