This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.DOMQuad()
Creates a new DOMQuad object.

Properties

p1,p2,p3,p4 Read only
are DOMPoint objects for each of the DOMQuad object's four corners.

Methods

DOMQuad.fromRect()
Returns a new DOMQuad object based on the passed set of coordinates.
DOMQuad.fromQuad()
Returns a new DOMQuad object based on the passed set of coordinates.
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 Status Comment
Geometry Interfaces Module Level 1
The definition of 'DOMQuad' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DOMQuad
Experimental
Chrome Full support 61Edge ? Firefox Full support YesIE ? Opera Full support 48Safari Full support YesWebView Android Full support 61Chrome Android Full support 61Firefox Android Full support YesOpera Android Full support 45Safari iOS Full support YesSamsung Internet Android Full support Yes
DOMQuad() constructor
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fromRect
Experimental
Chrome Full support YesEdge ? Firefox ? IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
fromQuad
Experimental
Chrome Full support YesEdge ? Firefox ? IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
getBounds
Experimental
Chrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
p1
Experimental
Chrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
p2
Experimental
Chrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
p3
Experimental
Chrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
p4
Experimental
Chrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
toJSON
Experimental
Chrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, fscholz, championshuttler, jpmedley
Last updated by: mdnwebdocs-bot,