Revision 980547 of DOMPoint

<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>

<p>A <strong><code>DOMPoint</code></strong> represents a 2D or 3D point in a coordinate system.</p>

<p>In general, a positive x component represents a position right of the origin, a positive y component upwards from the origin, and a positive z component outwards from the screen (in other words, opposite the direction that the user is facing).</p>

<p>It inherits from its parent, {{domxref("DOMPointReadOnly")}}.</p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}</dt>
 <dd>Creates a new <code>DOMPoint</code> object.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em><code>DOMPoint</code> inherits methods from its parent, {{domxref("DOMPointReadOnly")}}.</em></p>

<dl>
 <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt>
 <dd>Translates the position/perspective of a <code>DOMPoint</code> to a new position (doesn't appear to be supported anywhere yet.)</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p><em><code>DOMPoint</code> inherits properties from its parent, {{domxref("DOMPointReadOnly")}}.</em></p>

<dl>
 <dt>{{domxref("DOMPointReadOnly.x")}} {{readonlyInline}}</dt>
 <dd>The x coordinate of the <code>DOMPoint</code>.</dd>
 <dt>{{domxref("DOMPointReadOnly.y")}} {{readonlyInline}}</dt>
 <dd>The y coordinate of the <code>DOMPoint</code>.</dd>
 <dt>{{domxref("DOMPointReadOnly.z")}} {{readonlyInline}}</dt>
 <dd>The z coordinate of the <code>DOMPoint</code>.</dd>
 <dt>{{domxref("DOMPointReadOnly.w")}} {{readonlyInline}}</dt>
 <dd>The perspective value of the <code>DOMPoint</code>.</dd>
</dl>

<h2 id="Specification" name="Specification">Examples</h2>

<p>In the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>, <code>DOMPoint</code> values are used to represent points in the coordinate space that the user's head mounted display exists in. In the following snippet, the position of the VR HMD can be retrieved by first grabbing a reference to the position sensor's current state using {{domxref("PositionSensorVRDevice.getState")}}, then accessing the resulting {{domxref("VRPositionState")}}'s {{domxref("VRPositionState.position","position")}} property, which returns a <code>DOMPoint</code>. Note below the usage of <code>position.x</code>, <code>position.y</code>, and <code>position.z</code>.</p>

<pre class="brush: js">
function setView() {
      var posState = gPositionSensor.getState();
      if(posState.hasPosition) {
        posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
                                    + roundToTwo(posState.position.y) + " z"
                                    + roundToTwo(posState.position.z);
        xPos = -posState.position.x * WIDTH * 2;
        yPos = posState.position.y * HEIGHT * 2;
        if(-posState.position.z &gt; 0.01) {
          zPos = -posState.position.z;
        } else {
          zPos = 0.01;
        }
      }

  ...

}</pre>

<div class="note">
<p><strong>Note</strong>: See our <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html">positionsensorvrdevice demo</a> for the full code.</p>
</div>

<h2 id="Specification" name="Specification">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
   <td>{{Spec2('Geometry Interfaces')}}</td>
   <td>Latest spec version is an ED.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}<br />
    <br />
    &nbsp;</td>
   <td>{{CompatVersionUnknown}}<br />
    &nbsp;</td>
   <td>{{ CompatNo }}</td>
   <td>
    <p>{{ CompatNo }}</p>
   </td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatNo }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("DOMRect")}}</li>
</ul>