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 AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 61Edge ? Firefox ? IE ? Opera Full support 48Safari ? WebView Android Full support 61Chrome Android Full support 61Edge Mobile ? Firefox Android ? Opera Android Full support 48Safari iOS ? Samsung Internet Android ?
DOMQuad() constructor
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fromRect
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fromQuad
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
getBounds
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
p1
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
p2
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
p3
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
p4
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
toJSON
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

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: fscholz, championshuttler, jpmedley
Last updated by: fscholz,