MDN Featured Pages for DOMQuad Web API

files/en-us/web/api/domquad/domquad/index.md

@@ -0,0 +1,66 @@
+---
+title: "DOMQuad: DOMQuad() constructor"
+short-title: DOMQuad()
+slug: Web/API/DOMQuad/DOMQuad
+page-type: web-api-constructor
+browser-compat: api.DOMQuad.DOMQuad
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`DOMQuad()`** constructor
+creates and returns a new {{domxref("DOMQuad")}} object, given the values for some or
+all of its properties.
+
+You can also create a `DOMQuad` by calling the
+{{domxref("DOMQuad.fromRect()")}} or {{domxref("DOMQuad.fromQuad()")}} static function. That function accepts any object with the required parameters, including a `DOMQuad`, {{domxref("DOMPoint")}} or
+{{domxref("DOMPointReadOnly")}}.
+
+## Syntax
+
+```js-nolint
+new DOMQuad()
+new DOMQuad(p1)
+new DOMQuad(p1, p2)
+new DOMQuad(p1, p2, p3)
+new DOMQuad(p1, p2, p3, p4)
+```
+
+### Parameters
+
+- `p1` {{optional_inline}}
+  - : The `p1` {{domxref("DOMPoint")}} for the new `DOMQuad`.
+- `p2` {{optional_inline}}
+  - : The `p2` {{domxref("DOMPoint")}} for the new `DOMQuad`.
+- `p3` {{optional_inline}}
+  - : The `p3` {{domxref("DOMPoint")}} for the new `DOMQuad`.
+- `p4` {{optional_inline}}
+  - : The `p4` {{domxref("DOMPoint")}} for the new `DOMQuad`.
+
+## Examples
+
+This example creates a `DOMQuad` using a {{domxref("DOMPoint")}} and three additional points defined as objects.
+
+```js
+const point = new DOMPoint(2, 0);
+const quad = new DOMQuad(
+  point,
+  { x: 12, y: 0 },
+  { x: 12, y: 10 },
+  { x: 2, y: 10 },
+);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMPoint")}}
+- {{domxref("DOMRect")}}
+- {{domxref("DOMMatrix")}}

files/en-us/web/api/domquad/getbounds/index.md

@@ -0,0 +1,53 @@
+---
+title: "DOMQuad: getBounds() method"
+short-title: getBounds()
+slug: Web/API/DOMQuad/getBounds
+page-type: web-api-instance-method
+browser-compat: api.DOMQuad.getBounds
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The {{domxref("DOMQuad")}} method
+`getBounds()` returns a {{domxref("DOMRect")}} object representing the smallest rectangle that fully contains the `DOMQuad` object.
+
+## Syntax
+
+```js-nolint
+getBounds()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A {{domxref("DOMRect")}} with the x, y, width, and height properties, defining the bounding box for the `DOMQuad` based on its corner coordinates.
+
+## Examples
+
+This example creates a {{domxref("DOMQuad")}} with four points, then retrieves its bounding rectangle.
+
+```js
+const quad = new DOMQuad(
+  { x: 40, y: 25 },
+  { x: 180, y: 8 },
+  { x: 210, y: 150 },
+  { x: 10, y: 180 },
+);
+
+const quadBounds = quad.getBounds();
+```
+
+![An irregular quadrilateral with none of the sides being vertical or horizontal. Its four corners are marked with red circles. Around this quadrilateral is a dashed rectangle. All sides of this rectangle are vertical or horizontal and tangent the quadrilateral.](./domquad.svg)
+
+The figure shows an irregular quadrilateral represented by a {{domxref("DOMQuad")}}. The four red colored circles represent the {{domxref("DOMPoint")}} attributes `p1` to `p4`. The dashed rectangle represents the bounding rectangle returned by the `getBounds()` method of the {{domxref("DOMQuad")}}.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/domquad/tojson/index.md

@@ -0,0 +1,60 @@
+---
+title: "DOMQuad: toJSON() method"
+short-title: toJSON()
+slug: Web/API/DOMQuad/toJSON
+page-type: web-api-instance-method
+browser-compat: api.DOMQuad.toJSON
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The {{domxref("DOMQuad")}} method
+`toJSON()` returns a
+{{Glossary("JSON")}} representation of the `DOMQuad` object.
+
+## Syntax
+
+```js-nolint
+toJSON()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A new object whose properties are set to the values in the
+`DOMQuad` on which the method was called.
+
+## Examples
+
+This example creates a {{domxref("DOMQuad")}} with four {{domxref("DOMPoint")}} objects representing the corners of the current window, in screen coordinates, then converts that to JSON.
+
+```js
+const topLeft = new DOMPoint(window.screenX, window.screenY);
+const topRight = new DOMPoint(
+  window.screenX + window.innerWidth,
+  window.screenY,
+);
+const bottomLeft = new DOMPoint(
+  window.screenX,
+  window.screenY + window.innerHeight,
+);
+const bottomRight = new DOMPoint(
+  window.screenX + window.innerWidth,
+  window.screenY + window.innerHeight,
+);
+
+const quad = new DOMQuad(topLeft, topRight, bottomRight, bottomLeft);
+
+const quadJSON = quad.toJSON();
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}