DOMQuad: fromRect() static method

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

js
DOMQuad.fromRect()
DOMQuad.fromRect(rect)

Parameters

rect Optional

A DOMRect, DOMRectReadOnly, or an object with the same properties. All properties default to 0. The properties are:

x Optional

The x coordinate of the rectangle's origin (top-left corner).

y Optional

The y coordinate of the rectangle's origin (top-left corner).

width Optional

The width of the rectangle.

height Optional

The height of the rectangle.

Return value

A DOMQuad object.

Examples

undefined

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.

js
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.

js
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

See also