DOMQuad

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.

Note: This feature is available in Web Workers.

A DOMQuad is a collection of four DOMPoints defining the corners of an arbitrary quadrilateral. Returning DOMQuads lets getBoxQuads() return accurate information even when arbitrary 2D or 3D transforms are present. It has a handy bounds attribute returning a DOMRectReadOnly for those cases where you just want an axis-aligned bounding rectangle.

Constructor

DOMQuad()

Creates a new DOMQuad object.

Instance properties

DOMQuad.p1 Read only

A DOMPoint representing one corner of the DOMQuad.

DOMQuad.p2 Read only

A DOMPoint representing one corner of the DOMQuad.

DOMQuad.p3 Read only

A DOMPoint representing one corner of the DOMQuad.

DOMQuad.p4 Read only

A DOMPoint representing one corner of the DOMQuad.

Instance methods

DOMQuad.fromRect()

Returns a new DOMQuad object based on the passed set of coordinates.

DOMQuad.fromQuad()

Returns a new DOMQuad object or a set of quadrilateral coordinates based on the provided input.

DOMQuad.getBounds()

Returns a DOMRect object with the coordinates and dimensions of the DOMQuad object.

DOMQuad.toJSON()

Returns a JSON representation of the DOMQuad object.

Specifications

Specification
Geometry Interfaces Module Level 1
# DOMQuad

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
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

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.