DOMPointReadOnly : Object

Represents a 3D point using %%https://en.wikipedia.org/wiki/Homogeneous_coordinates#Use_in_computer_graphics_and_computer_vision|homogeneous coordinates%%
(x, y, z, and w).
See also %%/DOMPoint|DOMPoint%%.

Spec:
https://drafts.fxtf.org/geometry-1/#DOMPoint

----
new DOMPointReadOnly([x = 0 : Number, [y = 0 : Number, [z = 0 : Number, [w = 1 : Number]]]]) : DOMPointReadOnly

<htmlexample>
<script>
  const point = new DOMPointReadOnly();
  console.log(point.x, point.y, point.z, point.w);

  const point2 = new DOMPointReadOnly(4, 5, 6);
  console.log(point2.x, point2.y, point2.z, point2.w);

  const point3 = new DOMPointReadOnly(7, 8, 9, 10);
  console.log(point3.x, point3.y, point3.z, point3.w);
</script>
</htmlexample>

----
instance.x : Number

The x coordinate of the point.

<htmlexample>
<script>
  const point = new DOMPointReadOnly();
  console.log(point.x);

  const point2 = new DOMPointReadOnly(4, 5, 6);
  console.log(point2.x);

  const point3 = new DOMPointReadOnly(7, 8, 9, 10);
  console.log(point3.x);
</script>
</htmlexample>

ReadOnly:
true

----
instance.y : Number

The y coordinate of the point.

<htmlexample>
<script>
  const point = new DOMPointReadOnly();
  console.log(point.y);

  const point2 = new DOMPointReadOnly(4, 5, 6);
  console.log(point2.y);

  const point3 = new DOMPointReadOnly(7, 8, 9, 10);
  console.log(point3.y);
</script>
</htmlexample>

ReadOnly:
true

----
instance.z : Number

The z coordinate of the point.

<htmlexample>
<script>
  const point = new DOMPointReadOnly();
  console.log(point.z);

  const point2 = new DOMPointReadOnly(4, 5, 6);
  console.log(point2.z);

  const point3 = new DOMPointReadOnly(7, 8, 9, 10);
  console.log(point3.z);
</script>
</htmlexample>

ReadOnly:
true

----
instance.w : Number

The w coordinate of the point. Typically set to **1**.
See %%https://en.wikipedia.org/wiki/Homogeneous_coordinates#Use_in_computer_graphics_and_computer_vision|homogeneous coordinates%% for more details.

<htmlexample>
<script>
  const point = new DOMPointReadOnly();
  console.log(point.w);

  const point2 = new DOMPointReadOnly(4, 5, 6);
  console.log(point2.w);

  const point3 = new DOMPointReadOnly(7, 8, 9, 10);
  console.log(point3.w);
</script>
</htmlexample>

ReadOnly:
true

----
matrixTransform([matrix : DOMMatrix]) : DOMPoint

<htmlexample>
<script>
  const point = new DOMPointReadOnly(1, 3);
  const transform = new DOMMatrix('scale(2)');
  const transformedPoint = point.matrixTransform(transform);
  console.log(transformedPoint.x, transformedPoint.y);
</script>
</htmlexample>

----
fromPoint([point : { \
    x : Number /* Default = **0** */, \
    y : Number /* Default = **0** */, \
    z : Number /* Default = **0** */, \
    w : Number /* Default = **1** */ \
  }]) : DOMPointReadOnly

Returns a new DOMPointReadOnly that copies the coordinates from **point**.

<htmlexample>
<script>
  // The following are equivalent
  const point = new DOMPointReadOnly(4, 5, 6);
  console.log(point.x, point.y, point.z, point.w);

  const point2 = DOMPointReadOnly.fromPoint({ x: 4, y: 5, z: 6});
  console.log(point2.x, point2.y, point2.z, point2.w);
</script>
</htmlexample>

----
fromPoint([point : DOMPointReadOnly]) : DOMPointReadOnly

Returns a new DOMPointReadOnly that copies the coordinates from **point**.

<htmlexample>
<script>
  const point = new DOMPointReadOnly(4, 5, 6);
  console.log(point.x, point.y, point.z, point.w);

  const point2 = DOMPointReadOnly.fromPoint(point);
  console.log(point2.x, point2.y, point2.z, point2.w);

  const point3 = new DOMPoint(7, 8, 9, 10);
  console.log(point3.x, point3.y, point3.z, point3.w);

  const point4 = DOMPointReadOnly.fromPoint(point3);
  console.log(point4.x, point4.y, point4.z, point4.w);
</script>
</htmlexample>