Add DOMQuad static method documentation (mdn#41685)

* Add DOMQuad static method documentation

- Add documentation for DOMQuad.fromQuad()
- Add documentation for DOMQuad.fromRect()

These static methods allow creating DOMQuad objects from quadrilateral
coordinates or rectangle coordinates.

* fix: best practices

* fix: best practices

* Update files/en-us/web/api/domquad/fromquad_static/index.md

Co-authored-by: Joshua Chen <[email protected]>

* Update files/en-us/web/api/domquad/fromquad_static/index.md

Co-authored-by: Joshua Chen <[email protected]>

* Update files/en-us/web/api/domquad/fromquad_static/index.md

Co-authored-by: Joshua Chen <[email protected]>

* Update files/en-us/web/api/domquad/fromquad_static/index.md

Co-authored-by: Joshua Chen <[email protected]>

* Update files/en-us/web/api/domquad/fromrect_static/index.md

Co-authored-by: Joshua Chen <[email protected]>

* Update files/en-us/web/api/domquad/fromquad_static/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* restore example

* fix dom rect param desc

* More fixes

---------

Co-authored-by: Joshua Chen <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

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

@@ -8,13 +8,9 @@ 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.
+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_static", "DOMQuad.fromRect()")}} or {{domxref("DOMQuad.fromQuad_static", "DOMQuad.fromQuad()")}} static function. That function accepts any object with the required parameters, including a `DOMQuad`, {{domxref("DOMPoint")}} or
-{{domxref("DOMPointReadOnly")}}.
+You can also create a `DOMQuad` by calling the {{domxref("DOMQuad.fromRect_static", "DOMQuad.fromRect()")}} or {{domxref("DOMQuad.fromQuad_static", "DOMQuad.fromQuad()")}} static function. These functions accept any object with the required parameters, including a {{domxref("DOMRect")}}, {{domxref("DOMRectReadOnly")}}, or another `DOMQuad`.
 
 ## Syntax
 
@@ -28,14 +24,8 @@ 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`.
+- {{domxref("DOMQuad/p1", "p1")}} {{optional_inline}}, {{domxref("DOMQuad/p2", "p2")}} {{optional_inline}}, {{domxref("DOMQuad/p3", "p3")}} {{optional_inline}}, {{domxref("DOMQuad/p4", "p4")}} {{optional_inline}}
+  - : Each a {{domxref("DOMPoint")}} or an object with the same properties representing one corner of the quad.
 
 ## Examples
 

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

@@ -0,0 +1,65 @@
+---
+title: "DOMQuad: fromQuad() static method"
+short-title: fromQuad()
+slug: Web/API/DOMQuad/fromQuad_static
+page-type: web-api-static-method
+browser-compat: api.DOMQuad.fromQuad_static
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`fromQuad()`** static method of the {{domxref("DOMQuad")}} interface returns a new `DOMQuad` object based on the provided set of coordinates in the shape of another `DOMQuad` object.
+
+## Syntax
+
+```js-nolint
+DOMQuad.fromQuad()
+DOMQuad.fromQuad(quad)
+```
+
+### Parameters
+
+- `quad` {{optional_inline}}
+  - : A {{domxref("DOMQuad")}} or an object with the same properties. All properties default to `(0, 0, 0, 1)`. The properties are:
+    - {{domxref("DOMQuad/p1", "p1")}} {{optional_inline}}, {{domxref("DOMQuad/p2", "p2")}} {{optional_inline}}, {{domxref("DOMQuad/p3", "p3")}} {{optional_inline}}, {{domxref("DOMQuad/p4", "p4")}} {{optional_inline}}
+      - : Each a {{domxref("DOMPoint")}} or an object with the same properties representing one corner of the quad.
+
+    This object should usually be another {{domxref("DOMQuad")}} instance, or an existing object retrieved from some data storage. If you are creating this object from scratch, you should use the {{domxref("DOMQuad.DOMQuad", "DOMQuad()")}} constructor, which accepts the four points separately, avoiding creating the intermediate object.
+
+### Return value
+
+A {{domxref("DOMQuad")}} object.
+
+## Examples
+
+### Creating a quad from an existing DOMQuad
+
+This example shows how to create a new `DOMQuad` from an existing one.
+
+```js
+const originalQuad = new DOMQuad(
+  { x: 0, y: 0 },
+  { x: 50, y: 0 },
+  { x: 50, y: 50 },
+  { x: 0, y: 50 },
+);
+
+const newQuad = DOMQuad.fromQuad(originalQuad);
+
+console.log(newQuad.p1.x, newQuad.p1.y); // 0 0
+console.log(newQuad.p2.x, newQuad.p2.y); // 50 0
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMQuad.DOMQuad", "DOMQuad()")}} constructor
+- {{domxref("DOMPoint")}}
+- {{domxref("DOMRect")}}

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

@@ -0,0 +1,78 @@
+---
+title: "DOMQuad: fromRect() static method"
+short-title: fromRect()
+slug: Web/API/DOMQuad/fromRect_static
+page-type: web-api-static-method
+browser-compat: api.DOMQuad.fromRect_static
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`fromRect()`** static method of the {{domxref("DOMQuad")}} interface returns a new `DOMQuad` object based on the provided set of coordinates in the shape of a {{domxref("DOMRect")}} object.
+
+## Syntax
+
+```js-nolint
+DOMQuad.fromRect()
+DOMQuad.fromRect(rect)
+```
+
+### Parameters
+
+- `rect` {{optional_inline}}
+  - : A {{domxref("DOMRect")}}, {{domxref("DOMRectReadOnly")}}, or an object with the same properties. All properties default to `0`. The properties are:
+    - {{domxref("DOMRect/x", "x")}} {{optional_inline}}
+      - : The x coordinate of the rectangle's origin (top-left corner).
+    - {{domxref("DOMRect/y", "y")}} {{optional_inline}}
+      - : The y coordinate of the rectangle's origin (top-left corner).
+    - {{domxref("DOMRect/width", "width")}} {{optional_inline}}
+      - : The width of the rectangle.
+    - {{domxref("DOMRect/height", "height")}} {{optional_inline}}
+      - : The height of the rectangle.
+
+### Return value
+
+A {{domxref("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 {{domxref("DOMQuad.DOMQuad", "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 {{domxref("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
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMQuad.DOMQuad", "DOMQuad()")}} constructor
+- {{domxref("DOMRect")}}
+- {{domxref("DOMPoint")}}

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

@@ -34,10 +34,10 @@ A `DOMQuad` is a collection of four `DOMPoint`s defining the corners of an arbit
 
 ## Static methods
 
-- {{domxref("DOMQuad.fromRect_static", "DOMQuad.fromRect()")}}
-  - : Returns a new `DOMQuad` object based on the passed set of coordinates.
 - {{domxref("DOMQuad.fromQuad_static", "DOMQuad.fromQuad()")}}
-  - : Returns a new `DOMQuad` object or a set of quadrilateral coordinates based on the provided input.
+  - : Returns a new `DOMQuad` object based on the provided set of coordinates in the shape of another `DOMQuad` object.
+- {{domxref("DOMQuad.fromRect_static", "DOMQuad.fromRect()")}}
+  - : Returns a new `DOMQuad` object based on the provided set of coordinates in the shape of a {{domxref("DOMRect")}} object.
 
 ## Specifications