DOMQuad: fromRect() static method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
Note: This feature is available in Web Workers.
The fromRect() static method of the DOMQuad interface returns a new DOMQuad object based on the provided set of coordinates in the shape of a DOMRect object.
Syntax
DOMQuad.fromRect()
DOMQuad.fromRect(rect)
Parameters
rectOptional-
A
DOMRect,DOMRectReadOnly, or an object with the same properties. All properties default to0. The properties are:
Return value
A DOMQuad object.
Examples
Creating a rectangular quad
This example creates a DOMQuad from scratch that happens to be rectangular. Using fromRect() is more convenient than using the DOMQuad() constructor.
const quad = DOMQuad.fromRect({ x: 10, y: 20, width: 100, height: 50 });
console.log(quad.p1); // DOMPoint {x: 10, y: 20, z: 0, w: 1}
console.log(quad.p2); // DOMPoint {x: 110, y: 20, z: 0, w: 1}
console.log(quad.p3); // DOMPoint {x: 110, y: 70, z: 0, w: 1}
console.log(quad.p4); // DOMPoint {x: 10, y: 70, z: 0, w: 1}
Creating a quad from DOMRect
This example shows how to create a DOMQuad from a DOMRect object.
const domRect = new DOMRect(50, 60, 200, 100);
const quad = DOMQuad.fromRect(domRect);
console.log(quad.p1); // DOMPoint {x: 50, y: 60, z: 0, w: 1}
console.log(quad.p2); // DOMPoint {x: 250, y: 60, z: 0, w: 1}
console.log(quad.p3); // DOMPoint {x: 250, y: 160, z: 0, w: 1}
console.log(quad.p4); // DOMPoint {x: 50, y: 160, z: 0, w: 1}
Specifications
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-domquad-fromrect |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fromRect() static method
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support