DOMPointReadOnly : Object

constructor

Represents a 3D point using homogeneous coordinates (x, y, z, and w). See also DOMPoint.

Constructors

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

Example:

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

Run

Results:

Instance Properties

w : Number readonly

The w coordinate of the point. Typically set to 1. See homogeneous coordinates for more details.

Example:

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

Run

Results:

x : Number readonly

The x coordinate of the point.

Example:

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

Run

Results:

y : Number readonly

The y coordinate of the point.

Example:

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

Run

Results:

z : Number readonly

The z coordinate of the point.

Example:

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

Run

Results:

DOMPointReadOnly Methods

fromPoint 2 variants

fromPoint([point : Object]) : DOMPointReadOnly

point : {

x :	Number	Default = `0`
y :	Number	Default = `0`
z :	Number	Default = `0`
w :	Number	Default = `1`

}

Returns a new DOMPointReadOnly that copies the coordinates from point.

Example:

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

Run

Results:

fromPoint([point : DOMPointReadOnly]) : DOMPointReadOnly

Returns a new DOMPointReadOnly that copies the coordinates from point.

Example:

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

Run

Results:

matrixTransform([matrix : DOMMatrix]) : DOMPoint

Example:

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

Run

Results:

home license contribute feedback toggle light/dark mode