WEBGL_debug_shaders: getTranslatedShaderSource() method - Web APIs

WEBGL\_debug\_shaders: getTranslatedShaderSource() method
=========================================================

 The **`WEBGL_debug_shaders.getTranslatedShaderSource()`**
 method is part of the WebGL API and allows
 you to debug a translated shader.

Syntax
------

```js
getTranslatedShaderSource(shader)
```

### Parameters

`shader`

A `WebGLShader` to get the translated source from.

### Return value

 A `String` containing the translated shader source. An empty string is
 returned, if:

* no source has been defined or,
* `WebGLRenderingContext.compileShader()` has not yet been called or,
* the translation for the shader failed.
Examples
--------

```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

const shader = gl.createShader(gl.FRAGMENT\_SHADER);
gl.shaderSource(
  shader,
  "void main() { gl\_FragColor = vec4(gl\_FragCoord.x, 0.0, 0.0, 1.0); }",
);
gl.compileShader(shader);

const src = gl
  .getExtension("WEBGL\_debug\_shaders")
  .getTranslatedShaderSource(shader);
console.log(src);
// "void main(){
// (gl\_FragColor = vec4(gl\_FragCoord.x, 0.0, 0.0, 1.0));
// }"
```

Specifications
--------------

| Specification |
| --- |
| WebGL WEBGL\_debug\_shaders Khronos Ratified Extension Specification  |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLShader`
* `WebGLRenderingContext.compileShader()`


XRHitTestResult: createAnchor() method - Web APIs

XRHitTestResult: createAnchor() method
======================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`createAnchor()`** method of the `XRHitTestResult` interface creates an `XRAnchor` from a hit test result that is attached to a real-world object.

Syntax
------

```js
createAnchor()
```

### Parameters

None.

### Return value

A `Promise` resolving with an `XRAnchor` object.

Examples
--------

### Creating an anchor from a hit test result

The following example starts with an `XRHitTestResult` retrieved by calling `XRFrame.getHitTestResults()`. After calling `createAnchor()`, the Promise resolves with an `XRAnchor` to attach a virtual object to that location.

```js
hitTestResult.createAnchor().then(
  (anchor) => {
    // add anchored objects to the scene
  },
  (error) => {
    console.error(`Could not create anchor: ${error}`);
  },
);
```

Specifications
--------------

| Specification |
| --- |
| WebXR Anchors Module # dom-xrhittestresult-createanchor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRAnchor`
* `XRFrame.createAnchor()`


XRHitTestResult: getPose() method - Web APIs

XRHitTestResult: getPose() method
=================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`getPose()`** method of the `XRHitTestResult` interface returns the `XRPose` of the hit test result relative to the given base space.

Syntax
------

```js
getPose(baseSpace)
```

### Parameters

`baseSpace`

An `XRSpace` to use as the base or origin for computing the relative position and orientation of hit test results.

### Return value

Returns an `XRPose` object.

Examples
--------

### Getting the hit test result's pose

The following example uses `getPose()` to query a single hit test result's pose.

```js
let hitTestResults = xrFrame.getHitTestResults(hitTestSource);

if (hitTestResults.length > 0) {
  let pose = hitTestResults[0].getPose(referenceSpace);
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Hit Test Module # dom-xrhittestresult-getpose |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRFrame.getPose()`


DOMStringList: item() method - Web APIs

DOMStringList: item() method
============================

The **`item()`** method returns a string from a `DOMStringList` by index.

Syntax
------

```js
item(index)
```

 JavaScript also offers an array-like bracketed syntax for obtaining an item from a
 `DOMStringList` by index:

```js
list[index];
```

### Parameters

`index`

the index of the string to get. The index is zero-based.

### Return value

The string at the index position in the `DOMStringList`; otherwise `null` if the provided index is out of range.

### Exceptions

`TypeError`

Thrown if no argument is provided.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-domstringlist-item |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


DOMStringList: contains() method - Web APIs

DOMStringList: contains() method
================================

The **`contains()`** method returns a boolean indicating whether the given string is in the list.

Syntax
------

```js
contains(string)
```

### Parameters

`string`

A string you want to check for the existence of in the list.

### Return value

A boolean indicating whether the given string is in the list.

### Exceptions

`TypeError`

Thrown if no argument is provided.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-domstringlist-contains |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


DOMStringList: length property - Web APIs

DOMStringList: length property
==============================

The read-only **`length`** property indicates the number of strings in the `DOMStringList`.

Value
-----

A `Number`.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-domstringlist-length |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CookieStoreManager: getSubscriptions() method - Web APIs

CookieStoreManager: getSubscriptions() method
=============================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`getSubscriptions()`** method of the `CookieStoreManager` interface returns a list of all the cookie change subscriptions for this `ServiceWorkerRegistration`.

**Note:** This feature is available in Web Workers

Syntax
------

```js
getSubscriptions()
```

### Parameters

None.

### Return value

A `Promise` that resolves with a list of objects, each containing:

`name`

A string with the name of a cookie.

`url`

A string with the url of the scope used to subscribe to the cookie(s).

Examples
--------

If the `ServiceWorkerRegistration` represented by `registration` has subscribed to any cookie change events, `subscriptions` will resolve to a list of objects containing the name and URL of those cookies.

```js
const subscriptions = await self.registration.cookies.getSubscriptions();
```

Specifications
--------------

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-getsubscriptions |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CookieStoreManager: subscribe() method - Web APIs

CookieStoreManager: subscribe() method
======================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`subscribe()`** method of the `CookieStoreManager` interface subscribes a `ServiceWorkerRegistration` to cookie change events.

**Note:** This feature is available in Web Workers

Syntax
------

```js
subscribe(subscriptions)
```

### Parameters

`subscriptions`

An object containing:

`name`

A string with the name of a cookie.

`url`

A string with the url of a cookie scope. This may be narrower than the scope of the service worker registration.

### Return value

A `Promise` that resolves with `undefined` when the subscription completes.

### Exceptions

`TypeError`

Thrown if the URL passed in `subscriptions` does not match the service worker registration's `scope`.

Examples
--------

In this example, the `ServiceWorkerRegistration` represented by `registration` is subscribing to change events on the cookie named `"cookie1"` with a scope of `"/path1"`.

```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.subscribe(subscriptions);
```

The URL passed to the `subscribe()` method, may be narrower than the service worker registration scope. In the following example the subscription is for `/path/one/`, so it will receive change events for changes on the first cookie, but not the second.

```js
registration.cookies.subscribe([{ name: "cookie1", url: "/path/one/" }]); // subscription
cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/one/" }); // receives a change event
cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/two/" }); // does not receive a change event
```

Specifications
--------------

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-subscribe |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CookieStoreManager: unsubscribe() method - Web APIs

CookieStoreManager: unsubscribe() method
========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`unsubscribe()`** method of the `CookieStoreManager` interface stops the `ServiceWorkerRegistration` from receiving previously subscribed events.

**Note:** This feature is available in Web Workers

Syntax
------

```js
unsubscribe(subscriptions)
```

### Parameters

`subscriptions`

An object containing:

`name`

A string with the name of a cookie.

`url`

A string with the url of the scope used to subscribe to this cookie.

### Return value

A `Promise` that resolves with `undefined` when the service worker has been unsubscribed.

### Exceptions

`TypeError`

Thrown if the URL passed in `subscriptions` does not match the service worker registration's `scope`.

Examples
--------

In this example, the `ServiceWorkerRegistration` represented by `registration` is unsubscribing from change events on the cookie named `"cookie1"` with a scope of `"/path1"`.

```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.unsubscribe(subscriptions);
```

Specifications
--------------

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-unsubscribe |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ToggleEvent: newState property - Web APIs

ToggleEvent: newState property
==============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`newState`** read-only property of the `ToggleEvent` interface is a string representing the state the element is transitioning to.

Value
-----

A string. Possible values are `"open"` (the popover is being shown) or `"closed"` (the popover is being hidden).

Examples
--------

```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-toggleevent-newstate |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Popover API


ToggleEvent: oldState property - Web APIs

ToggleEvent: oldState property
==============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`oldState`** read-only property of the `ToggleEvent` interface is a string representing the state the element is transitioning from.

Value
-----

A string. Possible values are `"open"` (the popover is going from showing to hidden) or `"closed"` (the popover going from hidden to shown).

Examples
--------

```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.oldState === "open") {
    console.log("Popover is being hidden");
  } else {
    console.log("Popover is being shown");
  }
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-toggleevent-oldstate |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Popover API


ToggleEvent: ToggleEvent() constructor - Web APIs

ToggleEvent: ToggleEvent() constructor
======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`ToggleEvent()`** constructor creates a new `ToggleEvent` object.

Syntax
------

```js
new ToggleEvent(type, init)
```

### Parameters

`type`

A string representing the type of event. In the case of `ToggleEvent` this is always `toggleevent`.

`init`

An object containing the following properties:

`newState`

A string representing the state the element is transitioning to. Possible values are `"open"` and `"closed"`.

`oldState`

A string representing the state the element is transitioning from. Possible values are `"open"` and `"closed"`.

Examples
--------

A developer would not use this constructor manually. A new `ToggleEvent` object is constructed when a handler is invoked as a result of a relevant event firing.

For example:

```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # toggleevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Popover API


XRWebGLSubImage: depthStencilTexture property - Web APIs

XRWebGLSubImage: depthStencilTexture property
=============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The read-only **`depthStencilTexture`** property of the `XRWebGLSubImage` interface represents the depth/stencil `WebGLTexture` object for the `XRCompositionLayer` to render.

Value
-----

An opaque `WebGLTexture`. See WebXR opaque textures for details.

### Using `depthStencilTexture`

The `depthStencilTexture` property can be passed to `WebGL2RenderingContext.framebufferTextureLayer()` to attach the depth texture to a framebuffer.

```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({
  textureType: "texture-array",
});
const framebuffer = gl.createFramebuffer();

xrSession.updateRenderState({ layers: [layer] });
xrSession.requestAnimationFrame(onXRFrame);

function onXRFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRFrame);

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  const viewport = xrGlBinding.getSubImage(layer, xrFrame).viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.COLOR\_ATTACHMENT0,
      subImage.colorTexture,
      0,
      subImage.imageIndex,
    );
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.DEPTH\_ATTACHMENT,
      subImage.depthStencilTexture,
      0,
      subImage.imageIndex,
    );

    // Render from the viewpoint of xrView
  }
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-depthstenciltexture |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGL2RenderingContext.framebufferTextureLayer()`


XRWebGLSubImage: colorTextureHeight property - Web APIs

XRWebGLSubImage: colorTextureHeight property
============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The read-only **`colorTextureHeight`** property of the `XRWebGLSubImage` interface is a number representing the height in pixels of the GL attachment.

Value
-----

A number indicating the height in pixels.

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-colortextureheight |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLTexture`


XRWebGLSubImage: colorTextureWidth property - Web APIs

XRWebGLSubImage: colorTextureWidth property
===========================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The read-only **`colorTextureWidth`** property of the `XRWebGLSubImage` interface is a number representing the width in pixels of the GL attachment.

Value
-----

A number indicating the width in pixels.

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-colortexturewidth |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLTexture`


XRWebGLSubImage: colorTexture property - Web APIs

XRWebGLSubImage: colorTexture property
======================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The read-only **`colorTexture`** property of the `XRWebGLSubImage` interface represents the color `WebGLTexture` object for the `XRCompositionLayer` to render.

Value
-----

An opaque `WebGLTexture`. See WebXR opaque textures for details.

Examples
--------

### Using `colorTexture`

The `colorTexture` property can be passed to `WebGL2RenderingContext.framebufferTextureLayer()` to attach the color texture to a framebuffer.

```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({
  textureType: "texture-array",
});
const framebuffer = gl.createFramebuffer();

xrSession.updateRenderState({ layers: [layer] });
xrSession.requestAnimationFrame(onXRFrame);

function onXRFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRFrame);

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  const viewport = xrGlBinding.getSubImage(layer, xrFrame).viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.COLOR\_ATTACHMENT0,
      subImage.colorTexture,
      0,
      subImage.imageIndex,
    );
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.DEPTH\_ATTACHMENT,
      subImage.depthStencilTexture,
      0,
      subImage.imageIndex,
    );

    // Render from the viewpoint of xrView
  }
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-colortexture |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGL2RenderingContext.framebufferTextureLayer()`


XRWebGLSubImage: imageIndex property - Web APIs

XRWebGLSubImage: imageIndex property
====================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The read-only **`imageIndex`** property of the `XRWebGLSubImage` interface is a number representing the offset into the texture array if the layer was requested with `texture-array`; `null` otherwise.

Value
-----

A number or `null` if the layer wasn't requested with `texture-array`.

### Using `imageIndex`

The `imageIndex` property can be passed `WebGL2RenderingContext.framebufferTextureLayer()` to attach the depth and color textures to a framebuffer with the correct layer index.

```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({
  textureType: "texture-array",
});
const framebuffer = gl.createFramebuffer();

xrSession.updateRenderState({ layers: [layer] });
xrSession.requestAnimationFrame(onXRFrame);

function onXRFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRFrame);

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  const viewport = xrGlBinding.getSubImage(layer, xrFrame).viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.COLOR\_ATTACHMENT0,
      subImage.colorTexture,
      0,
      subImage.imageIndex,
    );
    gl.framebufferTextureLayer(
      gl.FRAMEBUFFER,
      gl.DEPTH\_ATTACHMENT,
      subImage.depthStencilTexture,
      0,
      subImage.imageIndex,
    );

    // Render from the viewpoint of xrView
  }
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglsubimage-imageindex |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGL2RenderingContext.framebufferTextureLayer()`


AuthenticatorResponse: clientDataJSON property - Web APIs

AuthenticatorResponse: clientDataJSON property
==============================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`clientDataJSON`** property of the `AuthenticatorResponse` interface stores a JSON string in an
 `ArrayBuffer`, representing the client data that was passed to `navigator.credentials.create()` or `navigator.credentials.get()`. This property is only accessed on one of the child objects of `AuthenticatorResponse`, specifically `AuthenticatorAttestationResponse` or `AuthenticatorAssertionResponse`.

Value
-----

An `ArrayBuffer`.

Instance properties
-------------------

 After the `clientDataJSON` object is converted from an
 `ArrayBuffer` to a JavaScript object, it will have the following properties:

`challenge`

 The base64url
 encoded version of the cryptographic challenge sent from the relying party's server.
 The original value are passed as the `challenge` option in
 `CredentialsContainer.get()` or
 `CredentialsContainer.create()`.

`crossOrigin` Optional

A boolean. If set to `true`, it means that the calling context is an `<iframe>` that is not same origin with its ancestor frames.

`origin`

 The fully qualified origin of the relying party which has been given by the
 client/browser to the authenticator. We should expect the *relying party's
id* to be a suffix of this value.

`tokenBinding` Optional
Deprecated

An object describing the state of the token binding protocol for the communication with the relying party. It has two properties:

* `status`: A string which is either `"supported"` which
 indicates the client support token binding but did not negotiate with the relying
 party or `"present"` when token binding was used already
* `id`: A string which is the base64url
 encoding of the token binding ID which was used for the communication.

 Should this property be absent, it would indicate that the client does not support
 token binding.

**Note:** `tokenBinding` is deprecated as of Level 3 of the spec, but the field is reserved so that it won't be reused for a different purpose.

`topOrigin` Optional

Contains the fully qualified top-level origin of the relying party. It is set only if it `crossOrigin` is `true`.

`type`

 A string which is either `"webauthn.get"` when an existing credential is
 retrieved or `"webauthn.create"` when a new credential is created.

Examples
--------

```js
function arrayBufferToStr(buf) {
  return String.fromCharCode.apply(null, new Uint8Array(buf));
}

// pk is a PublicKeyCredential that is the result of a create() or get() Promise
const clientDataStr = arrayBufferToStr(pk.clientDataJSON);
const clientDataObj = JSON.parse(clientDataStr);

console.log(clientDataObj.type); // "webauthn.create" or "webauthn.get"
console.log(clientDataObj.challenge); // base64 encoded String containing the original challenge
console.log(clientDataObj.origin); // the window.origin
```

Specifications
--------------

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # dom-authenticatorresponse-clientdatajson |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


InkPresenter: updateInkTrailStartPoint() method - Web APIs

InkPresenter: updateInkTrailStartPoint() method
===============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`updateInkTrailStartPoint()`** method of the `InkPresenter` interface indicates which `PointerEvent` was used as the last rendering point for the current frame, allowing the OS-level compositor to render a delegated ink trail ahead of the next pointer event being dispatched.

Syntax
------

```js
requestPresenter(event, style)
```

### Parameters

`event` Optional

A `PointerEvent`.

`style`

An object defining the trail style, which contains the following properties:

`color`

A `String` containing a valid CSS color code, indicating the color the presenter will use when rendering the ink trail.

`diameter`

A number representing the diameter the presenter will use when rendering the ink trail.

### Return value

`undefined`.

### Exceptions

`Error` `DOMException`

An error is thrown and the operation is aborted if the:

* `color` property does not contain a valid CSS color code.
* `diameter` property is not a number or less than 1.
* `presentationArea` element is removed from the document before or during rendering.

Examples
--------

### Drawing an ink trail

In this example, we draw a trail onto a 2D canvas. Near the start of the code, we call `Ink.requestPresenter()`, passing it the canvas as the presentation area for it to take care of and storing the promise it returns in the `presenter` variable.

Later on, in the `pointermove` event listener, the new position of the trailhead is drawn onto the canvas each time the event fires. In addition, the `InkPresenter` object returned when the `presenter` promise fulfills has its `updateInkTrailStartPoint()` method invoked; this is passed:

* The last trusted pointer event representing the rendering point for the current frame.
* A `style` object containing color and diameter settings.

The result is that a delegated ink trail is drawn ahead of the default browser rendering on the app's behalf, in the specified style, until the next time it receives a `pointermove` event.

#### HTML

```html
<canvas id="canvas"></canvas>
<div id="div">Delegated ink trail should match the color of this div.</div>
```

#### CSS

```css
div {
  background-color: rgb(0 255 0 / 100%);
  position: fixed;
  top: 1rem;
  left: 1rem;
}
```

#### JavaScript

```js
const ctx = canvas.getContext("2d");
const presenter = navigator.ink.requestPresenter({ presentationArea: canvas });
let move_cnt = 0;
let style = { color: "rgb(0 255 0 / 100%)", diameter: 10 };

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() \* (max - min + 1)) + min;
}

canvas.addEventListener("pointermove", async (evt) => {
  const pointSize = 10;
  ctx.fillStyle = style.color;
  ctx.fillRect(evt.pageX, evt.pageY, pointSize, pointSize);
  if (move_cnt == 20) {
    const r = getRandomInt(0, 255);
    const g = getRandomInt(0, 255);
    const b = getRandomInt(0, 255);

    style = { color: `rgb(${r} ${g} ${b} / 100%)`, diameter: 10 };
    move_cnt = 0;
    document.getElementById("div").style.backgroundColor =
      `rgb(${r} ${g} ${b} / 60%)`;
  }
  move_cnt += 1;
  await presenter.updateInkTrailStartPoint(evt, style);
});

window.addEventListener("pointerdown", () => {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
});

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
```

#### Result

Specifications
--------------

| Specification |
| --- |
| Ink API # dom-inkpresenter-updateinktrailstartpoint |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Enhancing Inking on the Web


InkPresenter: expectedImprovement property - Web APIs

InkPresenter: expectedImprovement property
==========================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`expectedImprovement`** read-only property of the `InkPresenter` interface returns a value, in milliseconds, indicating the latency improvement that can be expected using this presenter.

### Value

A number.

Example
-------

```js
async function inkInit() {
  const ink = navigator.ink;
  let presenter = await ink.requestPresenter({ presentationArea: canvas });
  console.log(presenter.expectedImprovement);

  //...
}
```

Specifications
--------------

| Specification |
| --- |
| Ink API # dom-inkpresenter-expectedimprovement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Enhancing Inking on the Web


InkPresenter: presentationArea property - Web APIs

InkPresenter: presentationArea property
=======================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`presentationArea`** read-only property of the `InkPresenter` interface returns the `Element` inside which rendering of ink strokes is confined.

If the preceding `Ink.requestPresenter()` method call included a specific `presentationArea` element definition, then that will be the element returned. Otherwise, the default is returned, which is the containing viewport.

This area is always the client coordinates for the element's border box, so moving the element or scrolling the element requires no recalculation on the developer's part.

### Value

An `Element`.

Example
-------

```js
async function inkInit() {
  const ink = navigator.ink;
  let presenter = await ink.requestPresenter({ presentationArea: canvas });
  console.log(presenter.presentationArea);

  //...
}
```

Specifications
--------------

| Specification |
| --- |
| Ink API # dom-inkpresenter-presentationarea |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Enhancing Inking on the Web


HTMLLinkElement: as property - Web APIs

HTMLLinkElement: as property
============================

The **`as`** property of the `HTMLLinkElement` interface returns a string representing the type of content to be preloaded by a link element.

 The `as` property must have a value for link elements when `rel="preload"`, or the resource will not be fetched.
 It may also be applied to link elements where `rel="modulepreload"`, but if omitted, will default to `script`.
 The property should not be set for other types of link elements, such as `rel="prefetch"`.

This property reflects the value of the `as` attribute of the `<link>` HTML element.

Value
-----

A string with the following allowed values: `"audio"`, `"document"`, `"embed"`, `"fetch"`, `"font"`, `"image"`, `"object"`, `"script"`, `"style"`, `"track"`, `"video"`, `"worker"`.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-link-as |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLLinkElement: rel property - Web APIs

HTMLLinkElement: rel property
=============================

The **`HTMLLinkElement.rel`** property reflects the `rel` attribute. It is a string containing a space-separated list of link types indicating the relationship between the resource represented by the `<link>` element and the current document.

 The most common use of this attribute is to specify a link to an external style sheet:
 the property is set to `stylesheet`, and the `href`
 attribute is set to the URL of an external style sheet to format the page.

Value
-----

A string.

Examples
--------

```js
const links = document.getElementsByTagName("link");
for (const link of links) {
  console.log(link);
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-link-rel |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The equivalent property on `<a>` and `<area>`,
 `HTMLAnchorElement.rel` and `HTMLAreaElement.rel`.
* The very same list but as tokens: `HTMLLinkElement.relList`


HTMLLinkElement: sheet property - Web APIs

HTMLLinkElement: sheet property
===============================

 The read-only **`sheet`** property of the `HTMLLinkElement` interface
 contains the stylesheet associated with that element.

A stylesheet is associated to an `HTMLLinkElement` if `rel="stylesheet"` is used with `<link>`.

Value
-----

A `StyleSheet` object, or `null` if none is associated with the element.

Examples
--------

```html
<html>
  <header>
    <link rel="stylesheet" href="styles.css" />
    …
  </header>
</html>
```

The `sheet` property of the `HTMLLinkElement` object will return the `StyleSheet` object describing `styles.css`.

Specifications
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLLinkElement: crossOrigin property - Web APIs

HTMLLinkElement: crossOrigin property
=====================================

The **`crossOrigin`** property of the `HTMLLinkElement` interface specifies the Cross-Origin Resource Sharing (CORS) setting to use when retrieving the resource.

Value
-----

A string of a keyword specifying the CORS mode to use when fetching the resource. Possible values are:

`anonymous` or the empty string (`""`)

Requests sent by the `HTMLLinkElement` will use the `cors` mode and the `same-origin` credentials mode. This means that CORS is enabled and credentials are sent *if* the resource is fetched from the same origin from which the document was loaded.

`use-credentials`

Requests sent by the `HTMLLinkElement` will use the `cors` mode and the `include` credentials mode. All resources requests by the element will use CORS, regardless of what domain the fetch is from.

If the `crossOrigin` property is specified with any other value, it is the same as specifing as the `anonymous`.

If the `crossOrigin` property is not specified, the resource is fetched without CORS (the `no-cors` mode and the `same-origin` credentials mode).

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-link-crossorigin |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLImageElement.crossOrigin`
* `HTMLMediaElement.crossOrigin`
* `HTMLScriptElement.crossOrigin`


HTMLLinkElement: referrerPolicy property - Web APIs

HTMLLinkElement: referrerPolicy property
========================================

 The
 **`HTMLLinkElement.referrerPolicy`**
 property reflects the HTML `referrerpolicy` attribute of the
 `<link>` element defining which referrer is sent when fetching the
 resource.

See the HTTP `Referrer-Policy` header for details.

Value
-----

A string; one of the following:

`no-referrer`

 The `Referer` header will be omitted entirely. No referrer
 information is sent along with requests.

`no-referrer-when-downgrade`

 The URL is sent
 as a referrer when the protocol security level stays the same (e.g.HTTP→HTTP,
 HTTPS→HTTPS), but isn't sent to a less secure destination (e.g. HTTPS→HTTP).

`origin`

 Only send the origin of the document as the referrer in all cases.
 The document `https://example.com/page.html` will send the referrer
 `https://example.com/`.

`origin-when-cross-origin`

 Send a full URL when performing a same-origin request, but only send the origin of
 the document for other cases.

`same-origin`

 A referrer will be sent for same-site origins, but
 cross-origin requests will contain no referrer information.

`strict-origin`

 Only send the origin of the document as the referrer when the protocol security
 level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure
 destination (e.g. HTTPS→HTTP).

`strict-origin-when-cross-origin` (default)

 This is the user agent's default behavior if no policy is specified. Send a full URL when performing a same-origin request, only send the origin when the
 protocol security level stays the same (e.g. HTTPS→HTTPS), and send no header to a
 less secure destination (e.g. HTTPS→HTTP).

`unsafe-url`

 Send a full URL when performing a same-origin or cross-origin request. This policy
 will leak origins and paths from TLS-protected resources to insecure origins.
 Carefully consider the impact of this setting.

Examples
--------

```js
const links = document.getElementsByTagName("link");
links[0].referrerPolicy; // "no-referrer"
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-link-referrerpolicy |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTTP header `Referrer-Policy`
* `HTMLAnchorElement.referrerPolicy`
* `HTMLAreaElement.referrerPolicy`
* `HTMLIFrameElement.referrerPolicy`
* `HTMLImageElement.referrerPolicy`


HTMLLinkElement: fetchPriority property - Web APIs

HTMLLinkElement: fetchPriority property
=======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`fetchPriority`** property of the
 `HTMLLinkElement` interface represents a hint given to the browser
 on how it should prioritize the preload of the given resource relative to other
 resources of the same type.

Value
-----

A string representing the priority hint. Possible values are:

`high`

 Fetch the preload at a high priority relative to other resources
 of the same type.

`low`

 Fetch the image at a low priority relative to other resources of
 the same type.

`auto`

 Default mode, which indicates no preference for
 the fetch priority. The browser decides what is best for the user.

 The `fetchPriority` property allows you to signal high or low priority preload
 fetches. This can be useful when applied to `<link>` elements
 to signal preloads that are more or less important to the user experience early
 in the loading process.

 The effects of the hint on resource loading is browser-specific so make sure to
 test on multiple browser engines.

 Use it sparingly for exceptional cases where the browser may not be able to
 infer the best way to load the resource automatically. Over use can result in
 degrading performance.

Examples
--------

```js
const preloadLink = document.createElement("link");
preloadLink.href = "myimage.jpg";
preloadLink.rel = "preload";
preloadLink.as = "image";
preloadLink.fetchPriority = "high";
document.head.appendChild(preloadLink);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-link-fetchpriority |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLLinkElement: relList property - Web APIs

HTMLLinkElement: relList property
=================================

The **`HTMLLinkElement.relList`** read-only property reflects the `rel` attribute. It is a live `DOMTokenList` containing the set of link types indicating the relationship between the resource represented by the `<link>` element and the current document.

 The property itself is read-only, meaning you can not substitute the
 `DOMTokenList` by another one, but the content of the returned list can be
 changed.

Value
-----

A live `DOMTokenList` of strings.

Examples
--------

```js
const links = document.getElementsByTagName("link");
for (const link of links) {
  console.log("New link found.");
  link.relList.forEach((relEntry) => {
    console.log(relEntry);
  });
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-link-rellist |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The equivalent property on `<a>` and `<area>`,
 `HTMLAnchorElement.relList` and `HTMLAreaElement.relList`.
* The very same list but as a space-separated tokens in a string:
 `HTMLLinkElement.rel`


HTMLLinkElement: hreflang property - Web APIs

HTMLLinkElement: hreflang property
==================================

The **`hreflang`** property of the `HTMLLinkElement` is used to indicate the language and the geographical targeting of a page. This hint can be used by browsers to select the more appropriate page or to improve SEO.

It reflects the `hreflang` attribute of the `<link>` element and is the empty string (`""`) if there is no `hreflang` attribute.

Value
-----

A string that contains a language tag, or the empty string (`""`) if there is no `hreflang` attribute.

Example
-------

```html
<link
 rel="alternate"
 href="www.example.com/fr/html"
 hreflang="fr"
 type="text/html"
 title="French HTML" />
<p class="tag"></p>
```

```css
.tag {
  margin-left: 20px;
  font: bold;
  font-size: 24px;
}
```

```js
const myLink = document.querySelector("link");
const pTag = document.querySelector(".tag");
pTag.textContent = myLink.hreflang;
```

Results
-------

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-link-hreflang |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLAnchorElement.hreflang` property


Gamepad: pose property - Web APIs

Gamepad: pose property
======================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`pose`** read-only property of the `Gamepad` interface returns a `GamepadPose` object representing the pose information associated with a WebVR controller (e.g. its position and orientation in 3D space).

Value
-----

A `GamepadPose` object.

Examples
--------

TBC

Specifications
--------------

| Specification |
| --- |
| Gamepad Extensions # dom-gamepad-pose |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Gamepad API
* WebVR API


Gamepad: buttons property - Web APIs

Gamepad: buttons property
=========================

 The **`Gamepad.buttons`** property of the `Gamepad` interface returns an array of `gamepadButton` objects representing the
 buttons present on the device.

 Each entry in the array is 0 if the button is not pressed, and non-zero (typically 1.0)
 if the button is pressed. Each `gamepadButton` object has two properties:
 `pressed` and `value`:

* The `pressed` property is a boolean indicating whether the button is
 currently pressed (`true`) or unpressed (`false`).
* The `value` property is a floating point value used to enable
 representing analog buttons, such as the triggers on many modern gamepads. The values
 are normalized to the range 0.0 – 1.0, with 0.0 representing a button that is not
 pressed, and 1.0 representing a button that is fully pressed.
Value
-----

An array of `gamepadButton` objects.

Examples
--------

 The following code is taken from my Gamepad API button demo (you can view the demo live, and
 find the source code on GitHub.) Note the code fork — in Chrome
 `Navigator.getGamepads` needs a `webkit` prefix and the button
 values are stores as an array of double values, whereas in Firefox
 `Navigator.getGamepads` doesn't need a prefix, and the button values are
 stored as an array of `GamepadButton` objects; it is the
 `GamepadButton.value` or `GamepadButton.pressed` properties of
 these we need to access, depending on what type of buttons they are. In this simple
 example I've just allowed either.

```js
function gameLoop() {
  let a = 0;
  let b = 0;
  if (navigator.webkitGetGamepads) {
    const gp = navigator.webkitGetGamepads()[0];

    if (gp.buttons[0] === 1) {
      b--;
    } else if (gp.buttons[1] === 1) {
      a++;
    } else if (gp.buttons[2] === 1) {
      b++;
    } else if (gp.buttons[3] === 1) {
      a--;
    }
  } else {
    const gp = navigator.getGamepads()[0];

    if (gp.buttons[0].value > 0 || gp.buttons[0].pressed) {
      b--;
    } else if (gp.buttons[1].value > 0 || gp.buttons[1].pressed) {
      a++;
    } else if (gp.buttons[2].value > 0 || gp.buttons[2].pressed) {
      b++;
    } else if (gp.buttons[3].value > 0 || gp.buttons[3].pressed) {
      a--;
    }
  }

  ball.style.left = `${a \* 2}px`;
  ball.style.top = `${b \* 2}px`;

  const start = rAF(gameLoop);
}
```

Specifications
--------------

| Specification |
| --- |
| Gamepad # dom-gamepad-buttons |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

Using the Gamepad API


Gamepad: hapticActuators property - Web APIs

Gamepad: hapticActuators property
=================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`hapticActuators`** read-only property of the `Gamepad` interface returns an array containing `GamepadHapticActuator` objects, each of which represents haptic feedback hardware available on the controller.

Value
-----

An array containing `GamepadHapticActuator` objects.

Examples
--------

```js
const gamepad = navigator.getGamepads()[0];

gamepad.hapticActuators[0].pulse(1.0, 200);
```

Specifications
--------------

| Specification |
| --- |
| Gamepad Extensions # dom-gamepad-hapticactuators |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Gamepad API


Gamepad: index property - Web APIs

Gamepad: index property
=======================

 The **`Gamepad.index`** property of the `Gamepad`
 interface returns an integer that is auto-incremented to be unique for each device
 currently connected to the system.

 This can be used to distinguish multiple controllers; a gamepad that is disconnected
 and reconnected will retain the same index.

Value
-----

A `number`.

Examples
--------

```js
window.addEventListener("gamepadconnected", () => {
  const gp = navigator.getGamepads()[0];
  gamepadInfo.textContent = `Gamepad connected at index ${gp.index}: ${gp.id}.`;
});
```

Specifications
--------------

| Specification |
| --- |
| Gamepad # dom-gamepad-index |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

Using the Gamepad API


Gamepad: hand property - Web APIs

Gamepad: hand property
======================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`hand`** read-only property of the `Gamepad` interface returns an enum defining what hand the controller is being held in, or is most likely to be held in.

Value
-----

A `GamepadHand` enum; possible values are:

* `left` — the left hand.
* `right` — the right hand.
* `""` (Empty string) – if the other values are not applicable. E.g., the controller is held in both hands or would be fine in either.
Examples
--------

TBC

Specifications
--------------

| Specification |
| --- |
| Gamepad Extensions # dom-gamepad-hand |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Gamepad API


Gamepad: id property - Web APIs

Gamepad: id property
====================

 The **`Gamepad.id`** property of the `Gamepad`
 interface returns a string containing some information about the controller.

 The exact syntax is not strictly specified, but in Firefox it will contain three pieces
 of information separated by dashes (`-`):

* Two 4-digit hexadecimal strings containing the USB vendor and product id of the
 controller
* The name of the controller as provided by the driver.

For example, a PS2 controller returned **810-3-USB Gamepad**.

 This information is intended to allow you to find a mapping for the controls on the
 device as well as display useful feedback to the user.

Value
-----

A string primitive.

Examples
--------

```js
window.addEventListener("gamepadconnected", () => {
  const gp = navigator.getGamepads()[0];
  gamepadInfo.textContent = `Gamepad connected at index ${gp.index}: ${gp.id}.`;
});
```

Specifications
--------------

| Specification |
| --- |
| Gamepad # dom-gamepad-id |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

Using the Gamepad API


Gamepad: displayId property - Web APIs

Gamepad: displayId property
===========================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`displayId`** read-only property of the `Gamepad` interface *returns the `VRDisplay.displayId` of the associated `VRDisplay` — the `VRDisplay` that the gamepad is controlling the displayed scene of.*

A Gamepad is considered to be associated with a `VRDisplay` if it reports a pose that is in the same space as the display's pose, see `VRDisplay.getPose()`.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Gamepads Module.

There is no direct replacement for this property. The `Gamepad` object associated with an `XRInputSource` can be obtained using the `XRInputSource.gamepad` property.

Value
-----

A number representing the associated `VRDisplay.displayId`. If the number is 0, then the gamepad is not associated with a VR display.

Examples
--------

```js
window.addEventListener("gamepadconnected", (e) => {
  if (!e.gamepad.displayId) {
    console.log("Gamepad connected");
  } else {
    console.log(
      `Gamepad connected, associated with VR display ${e.gamepad.displayId}`,
    );
  }
});
```

Specifications
--------------

This property was part of the old WebVR API that has been superseded by the WebXR Gamepads Module. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebVR API


Gamepad: axes property - Web APIs

Gamepad: axes property
======================

 The **`Gamepad.axes`** property of the `Gamepad`
 interface returns an array representing the controls with axes present on the device
 (e.g. analog thumb sticks).

 Each entry in the array is a floating point value in the range -1.0 – 1.0, representing
 the axis position from the lowest value (-1.0) to the highest value (1.0).

Value
-----

An array of numbers.

Examples
--------

```js
function gameLoop() {
  const [gp] = navigator.getGamepads();

  let a = 0;
  let b = 0;
  if (gp.axes[0] !== 0) {
    b -= gp.axes[0];
  } else if (gp.axes[1] !== 0) {
    a += gp.axes[1];
  } else if (gp.axes[2] !== 0) {
    b += gp.axes[2];
  } else if (gp.axes[3] !== 0) {
    a -= gp.axes[3];
  }

  ball.style.left = `${a \* 2}px`;
  ball.style.top = `${b \* 2}px`;

  const start = requestAnimationFrame(gameLoop);
}
```

Specifications
--------------

| Specification |
| --- |
| Gamepad # dom-gamepad-axes |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

Using the Gamepad API


Gamepad: vibrationActuator property - Web APIs

Gamepad: vibrationActuator property
===================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`vibrationActuator`** read-only property of the `Gamepad` interface returns a `GamepadHapticActuator` object, which represents haptic feedback hardware available on the controller.

Value
-----

A `GamepadHapticActuator` object.

Examples
--------

```js
const gamepad = navigator.getGamepads()[0];

gamepad.vibrationActuator.playEffect("dual-rumble", {
  startDelay: 0,
  duration: 200,
  weakMagnitude: 1.0,
  strongMagnitude: 1.0,
});
```

Specifications
--------------

#### No specification found

No specification data found for `api.Gamepad.vibrationActuator`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Gamepad API


Gamepad: mapping property - Web APIs

Gamepad: mapping property
=========================

 The **`Gamepad.mapping`** property of the
 `Gamepad` interface returns a string indicating whether the browser has
 remapped the controls on the device to a known layout.

The currently supported known layouts are:

* "standard" for the standard gamepad.
* "xr-standard for the standard XR gamepad. See also `XRInputSource.gamepad`.
Examples
--------

```js
let gp = navigator.getGamepads()[0];
console.log(gp.mapping);
```

Specifications
--------------

| Specification |
| --- |
| Gamepad # dom-gamepad-mapping |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

Using the Gamepad API


Gamepad: timestamp property - Web APIs

Gamepad: timestamp property
===========================

 The **`Gamepad.timestamp`** property of the
 `Gamepad` interface returns a `DOMHighResTimeStamp`
 representing the last time the data for this gamepad was updated.

 The idea behind this is to allow developers to determine if the `axes` and
 `button` data have been updated from the hardware. The value must be
 relative to the `navigationStart` attribute of the
 `PerformanceTiming` interface. Values are monotonically
 increasing, meaning that they can be compared to determine the ordering of updates, as
 newer values will always be greater than or equal to older values.

**Note:** This property is not currently supported anywhere.

Value
-----

A `DOMHighResTimeStamp` object.

Examples
--------

```js
const gp = navigator.getGamepads()[0];
console.log(gp.timestamp);
```

Specifications
--------------

| Specification |
| --- |
| Gamepad # dom-gamepad-timestamp |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

Using the Gamepad API


Gamepad: connected property - Web APIs

Gamepad: connected property
===========================

 The **`Gamepad.connected`** property of the
 `Gamepad` interface returns a boolean indicating whether the gamepad is
 still connected to the system.

 If the gamepad is connected, the value is `true`; if not, it is
 `false`.

Value
-----

A boolean.

Examples
--------

```js
const gp = navigator.getGamepads()[0];
console.log(gp.connected);
```

Specifications
--------------

| Specification |
| --- |
| Gamepad # dom-gamepad-connected |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

Using the Gamepad API


CSSLayerStatementRule: nameList property - Web APIs

CSSLayerStatementRule: nameList property
========================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`nameList`** property of the `CSSLayerStatementRule` interface return the list of associated cascade layer names. The names can't be modified.

Value
-----

A `Array` of strings, each representing a cascade layer represented by the `@layer` statement rule.

Examples
--------

### HTML

```html
<div></div>
```

### CSS

```css
@layer layerName, layerName2;

@layer layerName3 {
  div {
    font-family: serif;
  }
}
```

### JavaScript

```js
const item = document.getElementsByTagName("div")[0];
const rules = document.styleSheets[1].cssRules;
// Note that stylesheet #1 is the stylesheet associated with this embedded example,
// while stylesheet #0 is the stylesheet associated with the whole MDN page

const layerStatementRule = rules[0]; // A CSSLayerStatementRule
const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property.

item.textContent = `@layer declares the following layers: ${layer.nameList.join(
 ", ",
)}.`;
```

Specifications
--------------

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # dom-csslayerstatementrule-namelist |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `CSSLayerBlockRule.name`
* `@layer`
* The `@layer` statement at-rule for named layers


MediaStreamTrackEvent: track property - Web APIs

MediaStreamTrackEvent: track property
=====================================

The **`track`** read-only property of the `MediaStreamTrackEvent` interface returns the `MediaStreamTrack` associated with this event.

Value
-----

A `MediaStreamTrack` object.

Examples
--------

```js
const stream = new MediaStream();

stream.addEventListener("removetrack", (event) => {
  console.log(`${event.track.kind} track removed`);
});
```

Specifications
--------------

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrackevent-track |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `addtrack` and `removetrack` events
* `MediaStreamTrack`


MediaStreamTrackEvent: MediaStreamTrackEvent() constructor - Web APIs

MediaStreamTrackEvent: MediaStreamTrackEvent() constructor
==========================================================

 The **`MediaStreamTrackEvent()`** constructor returns a new `MediaStreamTrackEvent` object,
 which represents an event signaling that a `MediaStreamTrack` has been added to or removed from a `MediaStream`.

Syntax
------

```js
new MediaStreamTrackEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `addtrack` or `removetrack`.

`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`track`

A `MediaStreamTrack` object representing the track which was added to or removed from the stream.

### Return value

A new `MediaStreamTrackEvent` object, initialized based on the provided options.

Specifications
--------------

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrackevent-constructor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `addtrack` and `removetrack` events
* `MediaStreamTrack`
* `MediaStream`
* Media Capture and Streams API


XRWebGLBinding: createCubeLayer() method - Web APIs

XRWebGLBinding: createCubeLayer() method
========================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`createCubeLayer()`** method of the `XRWebGLBinding` interface returns an `XRCubeLayer` object, which is a layer that renders directly from a cubemap, and projects it onto the inside faces of a cube.

Syntax
------

```js
createCubeLayer(init)
```

### Parameters

`init`

An object to configure the `XRCubeLayer`. It must have the `space`, `viewPixelHeight`, and `viewPixelWidth` properties. `init` has the following properties:

`colorFormat` Optional

A `GLenum` defining the data type of the color texture data. Possible values:

* `gl.RGB`
* `gl.RGBA` (Default)
 Additionally, for contexts with the `EXT_sRGB` extension enabled:
* `ext.SRGB_EXT`
* `ext.SRGB_ALPHA_EXT`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.RGBA8`
* `gl.RGB8`
* `gl.SRGB8`
* `gl.RGB8_ALPHA8`
 Additionally, for contexts with the `WEBGL_compressed_texture_etc` extension enabled:
* `ext.COMPRESSED_RGB8_ETC2`
* `ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_RGBA8_ETC2_EAC`
* `ext.COMPRESSED_SRGB8_ETC2`
* `ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC`
 Additionally, for contexts with the `WEBGL_compressed_texture_astc` extension enabled:
* All of the formats the extension supports.

`depthFormat` Optional

 A `GLenum` defining the data type of the depth texture data or `0` indicating that the layer should not provide a depth texture. (In that case `XRProjectionLayer.ignoreDepthValues` will be `true`.)
 Possible values for `WebGLRenderingContext` contexts with the `WEBGL_depth_texture` extension enabled, or for `WebGL2RenderingContext` contexts (no extension required):

* `gl.DEPTH_COMPONENT` (Default)
* `gl.DEPTH_STENCIL`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.DEPTH_COMPONENT24`
* `gl.DEPTH24_STENCIL24`

`isStatic` Optional

A boolean that, if true, indicates you can only draw to this layer when `needsRedraw` is `true`. The default value is `false`.

`layout`

A string indicating the layout of the layer. Possible values:

* `default`: The layer accommodates all views of the session.
* `mono`: A single `XRSubImage` is allocated and presented to both eyes.
* `stereo`: The user agent decides how it allocates the `XRSubImage` (one or two) and the layout (top/bottom or left/right).
* `stereo-left-right`: A single `XRSubImage` is allocated. The left eye gets the left area of the texture, the right eye the right.
* `stereo-top-bottom`: A single `XRSubImage` is allocated. The left eye gets the top area of the texture, the right eye the bottom.
 The default value is `mono`.

`mipLevels` Optional

A number specifying the desired number of mip levels. The default value is `1`.

`orientation` Optional

A `DOMPointReadOnly` specifying the orientation relative to the `space` property.

`space` **Required**

An `XRSpace` object defining the layer's spatial relationship with the user's physical environment.

`viewPixelHeight` **Required**

A number specifying the pixel height of the layer view.

`viewPixelWidth` **Required**

A number specifying the pixel width of the layer view.

### Return value

An `XRCubeLayer` object.

Examples
--------

### Creating an XRCubeLayer

Configure the cube layer using the properties listed above in a call to `createCubeLayer()`. To present layers to the XR device, add them to the `layers` render state using `XRSession.updateRenderState()`.

```js
function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const cubeLayer = xrGlBinding.createCubeLayer({
    space: xrReferenceSpace,
    viewPixelHeight: 512,
    viewPixelWidth: 512,
  });
  xrSession.updateRenderState({
    layers: [cubeLayer],
  });
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-createcubelayer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRCubeLayer`
* WebGL constants


XRWebGLBinding: getReflectionCubeMap() method - Web APIs

XRWebGLBinding: getReflectionCubeMap() method
=============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`getReflectionCubeMap()`** method of the `XRWebGLBinding` interface returns a `WebGLTexture` object containing a reflection cube map texture.

The texture format is specified by the session's `reflectionFormat`. See the `options` parameter on `XRSession.requestLightProbe()` and `XRSession.preferredReflectionFormat` for more details. By default, the `srgba8` format is used. When using a `rgba16f` format, you need to be within a WebGL 2.0 context or enable the `OES_texture_half_float` extension within WebGL 1.0 contexts.

Syntax
------

```js
getReflectionCubeMap(lightProbe)
```

### Parameters

`lightProbe`

An `XRLightProbe` object returned by calling `XRSession.requestLightProbe()`.

### Return value

A `WebGLTexture` object.

Examples
--------

You typically call `getReflectionCubeMap()` whenever the `reflectionchange` event fires on a light probe to retrieve an updated cube map. This is less expensive than retrieving lighting information with every `XRFrame`.

If the `rgba16f` format is used, enable the `OES_texture_half_float` extension within WebGL 1.0 contexts.

```js
const glBinding = new XRWebGLBinding(xrSession, gl);
gl.getExtension("OES\_texture\_half\_float"); // if rgba16f is the preferredReflectionFormat

xrSession.requestLightProbe().then((lightProbe) => {
  lightProbe.addEventListener("reflectionchange", () => {
    glBinding.getReflectionCubeMap(lightProbe);
  });
});
```

Specifications
--------------

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # dom-xrwebglbinding-getreflectioncubemap |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRLightProbe`
* `OES_texture_half_float`


XRWebGLBinding: createCylinderLayer() method - Web APIs

XRWebGLBinding: createCylinderLayer() method
============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`createCylinderLayer()`** method of the `XRWebGLBinding` interface returns an `XRCylinderLayer` object, which is a layer that takes up a curved rectangular space in the virtual environment.

Syntax
------

```js
createCylinderLayer(init)
```

### Parameters

`init`

An object to configure the `XRCylinderLayer`. It must have the `space`, `viewPixelHeight`, and `viewPixelWidth` properties. `init` has the following properties:

`aspectRatio` Optional

A number indicating the ratio of the visible cylinder section. It is the ratio of the width of the visible section of the cylinder divided by its height. The width is calculated by multiplying the `radius` with the `centralAngle`. The default value is `2.0`.

`centralAngle` Optional

A number indicating the angle in radians of the visible section of the cylinder. Default value: `0.78539` (π / 4).

`colorFormat` Optional

A `GLenum` defining the data type of the color texture data. Possible values:

* `gl.RGB`
* `gl.RGBA`
 Additionally, for contexts with the `EXT_sRGB` extension enabled:
* `ext.SRGB_EXT`
* `ext.SRGB_ALPHA_EXT`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.RGBA8`
* `gl.RGB8`
* `gl.SRGB8`
* `gl.RGB8_ALPHA8`
 Additionally, for contexts with the `WEBGL_compressed_texture_etc` extension enabled:
* `ext.COMPRESSED_RGB8_ETC2`
* `ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_RGBA8_ETC2_EAC`
* `ext.COMPRESSED_SRGB8_ETC2`
* `ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC`
 Additionally, for contexts with the `WEBGL_compressed_texture_astc` extension enabled:
* `All` of the formats the extension supports.
 The default value is `gl.RGBA`.

`depthFormat` Optional

 A `GLenum` defining the data type of the depth texture data or `0` indicating that the layer should not provide a depth texture (in that case `XRProjectionLayer.ignoreDepthValues` will be `true`).
 Possible values within `WebGLRenderingContext` contexts with the `WEBGL_depth_texture` extension enabled, or within `WebGL2RenderingContext` contexts (no extension required):

* `gl.DEPTH_COMPONENT`
* `gl.DEPTH_STENCIL`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.DEPTH_COMPONENT24`
* `gl.DEPTH24_STENCIL24`
 The default value is `gl.DEPTH_COMPONENT`.

`isStatic` Optional

A boolean that, if true, indicates you can only draw to this layer when `needsRedraw` is `true`. The default value is `false`.

`layout` Optional

A string indicating the layout of the layer. Possible values:

`default`

The layer accommodates all views of the session.

`mono`

A single `XRSubImage` is allocated and presented to both eyes.

`stereo`

The user agent decides how it allocates the `XRSubImage` (one or two) and the layout (top/bottom or left/right).

`stereo-left-right`

A single `XRSubImage` is allocated. Left eye gets the left area of the texture, right eye the right.

`stereo-top-bottom`

 A single `XRSubImage` is allocated. Left eye gets the top area of the texture, right eye the bottom.
 The default value is `mono`.

`mipLevels` Optional

A number specifying desired number of mip levels. The default value is `1`.

`radius` Optional

A number indicating the radius of the cylinder. Default value: `2.0`.

`space` **Required**

An `XRSpace` object defining the layer's spatial relationship with the user's physical environment.

`textureType` Optional

A string defining the type of texture the layer will have. Possible values:

* `texture`: The textures of `XRWebGLSubImage` will be of type `gl.TEXTURE_2D`.
* `texture-array`: the textures of `XRWebGLSubImage` will be of type `gl.TEXTURE_2D_ARRAY` (WebGL 2 contexts only).
 The default value is `texture`.

`transform` Optional

An `XRRigidTransform` object defining the offset and orientation relative to `space`.

`viewPixelHeight` **Required**

A number specifying the pixel height of the layer view.

`viewPixelWidth` **Required**

A number specifying the pixel width of the layer view.

### Return value

An `XRCylinderLayer` object.

Examples
--------

### Creating an `XRCylinderLayer`

Configure the cylinder layer using the properties listed above in a call to `createCylinderLayer()`. To present layers to the XR device, add them to the `layers` render state using `XRSession.updateRenderState()`.

```js
function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const cylinderLayer = xrGlBinding.createCylinderLayer({
    space: xrReferenceSpace,
    viewPixelWidth: 1200,
    viewPixelHeight: 600,
    centralAngle: (60 \* Math.PI) / 180,
    aspectRatio: 2,
    radius: 2,
    transform: new XRRigidTransform(/\* … \*/),
  });

  xrSession.updateRenderState({
    layers: [cylinderLayer],
  });
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-createcylinderlayer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRCylinderLayer`
* WebGL constants


XRWebGLBinding: createEquirectLayer() method - Web APIs

XRWebGLBinding: createEquirectLayer() method
============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`createEquirectLayer()`** method of the `XRWebGLBinding` interface returns an `XREquirectLayer` object, which is a layer that maps equirectangular coded data onto the inside of a sphere.

Syntax
------

```js
createEquirectLayer(options)
```

### Parameters

`options`

An object to configure the `XREquirectLayer`. It must have the `space`, `viewPixelHeight`, and `viewPixelWidth` properties. `init` has the following properties:

`centralHorizontalAngle` Optional

A number indicating the central horizontal angle in radians of the sphere. Default value: `6.28318` (2π).

`colorFormat` Optional

A `GLenum` defining the data type of the color texture data. Possible values:

* `gl.RGB`
* `gl.RGBA`
 Additionally, for contexts with the `EXT_sRGB` extension enabled:
* `ext.SRGB_EXT`
* `ext.SRGB_ALPHA_EXT`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.RGBA8`
* `gl.RGB8`
* `gl.SRGB8`
* `gl.RGB8_ALPHA8`
 Additionally, for contexts with the `WEBGL_compressed_texture_etc` extension enabled:
* `ext.COMPRESSED_RGB8_ETC2`
* `ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_RGBA8_ETC2_EAC`
* `ext.COMPRESSED_SRGB8_ETC2`
* `ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC`
 Additionally, for contexts with the `WEBGL_compressed_texture_astc` extension enabled:
* `All` of the formats the extension supports.
 The default value is `gl.RGBA`.

`depthFormat` Optional

 A `GLenum` defining the data type of the depth texture data, or else `0` to indicate that the layer should not provide a depth texture (in that case `XRProjectionLayer.ignoreDepthValues` will be `true`).
 Possible values within `WebGLRenderingContext` contexts with the `WEBGL_depth_texture` extension enabled, or within `WebGL2RenderingContext` contexts (no extension required):

* `gl.DEPTH_COMPONENT`
* `gl.DEPTH_STENCIL`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.DEPTH_COMPONENT24`
* `gl.DEPTH24_STENCIL24`
 The default value is `gl.DEPTH_COMPONENT`.

`isStatic` Optional

A boolean that, if true, indicates you can only draw to this layer when `needsRedraw` is `true`. The default value is `false`.

`layout` Optional

A string indicating the layout of the layer. Possible values:

`default`

The layer accommodates all views of the session.

`mono`

A single `XRSubImage` is allocated and presented to both eyes.

`stereo`

The user agent decides how it allocates the `XRSubImage` (one or two) and the layout (top/bottom or left/right).

`stereo-left-right`

A single `XRSubImage` is allocated. Left eye gets the left area of the texture, right eye the right.

`stereo-top-bottom`

 A single `XRSubImage` is allocated. Left eye gets the top area of the texture, right eye the bottom.
 The default value is `mono`.

`lowerVerticalAngle` Optional

A number indicating the lower vertical angle in radians of the sphere. Default value: `-1.570795` (-π/2).

`mipLevels` Optional

A number specifying desired number of mip levels. The default value is `1`.

`radius` Optional

A number indicating the radius of the sphere. Default value: `0` (infinite sphere).

`space` **Required**

An `XRSpace` object defining the layer's spatial relationship with the user's physical environment.

`textureType` Optional

A string defining the type of texture the layer will have. Possible values:

`texture`

The textures of `XRWebGLSubImage` will be of type `gl.TEXTURE_2D`.

`texture-array`

 The textures of `XRWebGLSubImage` will be of type `gl.TEXTURE_2D_ARRAY` (WebGL 2 contexts only).
 The default value is `texture`.

`transform` Optional

An `XRRigidTransform` object defining the offset and orientation relative to `space`.

`upperVerticalAngle` Optional

A number indicating the upper vertical angle in radians of the sphere. Default value: `1.570795` (π/2).

`viewPixelHeight` **Required**

A number specifying the pixel height of the layer view.

`viewPixelWidth` **Required**

A number specifying the pixel width of the layer view.

### Return value

An `XREquirectLayer` object.

Examples
--------

### Creating an `XREquirectLayer`

Configure the equirect layer using the properties listed above in a call to `createEquirect()`. To present layers to the XR device, add them to the `layers` render state using `XRSession.updateRenderState()`.

```js
function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const equirectLayer = xrGlBinding.createEquirectLayer({
    space: xrReferenceSpace,
    viewPixelWidth: 1200,
    viewPixelHeight: 600,
    centralHorizontalAngle: 2 \* Math.PI,
    upperVerticalAngle: Math.PI / 2.0,
    lowerVerticalAngle: -Math.PI / 2.0,
    radius: 0,
  });

  xrSession.updateRenderState({
    layers: [equirectLayer],
  });
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-createequirectlayer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XREquirectLayer`
* WebGL constants


XRWebGLBinding: XRWebGLBinding() constructor - Web APIs

XRWebGLBinding: XRWebGLBinding() constructor
============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

 The **`XRWebGLBinding()`** constructor creates and
 returns a new `XRWebGLBinding` object.

Syntax
------

```js
new XRWebGLBinding(session, context)
```

### Parameters

`session`

 An `XRSession` object specifying the WebXR session which will be
 rendered using the WebGL context.

`context`

 A `WebGLRenderingContext` or `WebGL2RenderingContext`
 identifying the WebGL drawing context to use for rendering the scene for the specified
 WebXR session.

### Return value

A new `XRWebGLBinding`.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the new `XRWebGLBinding` could not be created due to one of the following situations:

* The `XRSession` specified by `session` has already been
 stopped.
* The specified WebGL context, `context`, has been lost for any reason, such as a GPU switch or reset.
* The specified `session` is immersive but the `context` is
 not WebXR compatible.

Examples
--------

```js
const canvasElement = document.querySelector(".output-canvas");
const gl = canvasElement.getContext("webgl");
const xrSession = await navigator.xr.requestSession("immersive-vr");
await gl.makeXRCompatible();

const glBinding = new XRWebGLBinding(xrSession, gl);
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-xrwebglbinding |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.makeXRCompatible()`


XRWebGLBinding: createQuadLayer() method - Web APIs

XRWebGLBinding: createQuadLayer() method
========================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`createQuadLayer()`** method of the `XRWebGLBinding` interface returns an `XRQuadLayer` object which is a layer that takes up a flat rectangular space in the virtual environment.

Syntax
------

```js
createQuadLayer(options)
```

### Parameters

`options`

An object to configure the `XRQuadLayer`. It must have the `space`, `viewPixelHeight`, and `viewPixelWidth` properties. `init` has the following properties:

`colorFormat` Optional

A `GLenum` defining the data type of the color texture data. Possible values:

* `gl.RGB`
* `gl.RGBA`
 Additionally, for contexts with the `EXT_sRGB` extension enabled:
* `ext.SRGB_EXT`
* `ext.SRGB_ALPHA_EXT`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.RGBA8`
* `gl.RGB8`
* `gl.SRGB8`
* `gl.RGB8_ALPHA8`
 Additionally, for contexts with the `WEBGL_compressed_texture_etc` extension enabled:
* `ext.COMPRESSED_RGB8_ETC2`
* `ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_RGBA8_ETC2_EAC`
* `ext.COMPRESSED_SRGB8_ETC2`
* `ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2`
* `ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC`
 Additionally, for contexts with the `WEBGL_compressed_texture_astc` extension enabled:
* All of the formats the extension supports.
 The default value is `gl.RGBA`.

`depthFormat` Optional

 A `GLenum` defining the data type of the depth texture data or `0` indicating that the layer should not provide a depth texture (in that case `XRProjectionLayer.ignoreDepthValues` will be `true`).
 Possible values within `WebGLRenderingContext` contexts with the `WEBGL_depth_texture` extension enabled, or within `WebGL2RenderingContext` contexts (no extension required):

* `gl.DEPTH_COMPONENT`
* `gl.DEPTH_STENCIL`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.DEPTH_COMPONENT24`
* `gl.DEPTH24_STENCIL24`
 The default value is `gl.DEPTH_COMPONENT`.

`height` Optional

A number specifying the height of the layer in meters. The default value is `1.0`.

`isStatic` Optional

A boolean that, if true, indicates you can only draw to this layer when `needsRedraw` is `true`. The default value is `false`.

`layout` Optional

A string indicating the layout of the layer. Possible values:

`default`

The layer accommodates all views of the session.

`mono`

A single `XRSubImage` is allocated and presented to both eyes.

`stereo`

The user agent decides how it allocates the `XRSubImage` (one or two) and the layout (top/bottom or left/right).

`stereo-left-right`

A single `XRSubImage` is allocated. Left eye gets the left area of the texture, right eye the right.

`stereo-top-bottom`

 A single `XRSubImage` is allocated. Left eye gets the top area of the texture, right eye the bottom.
 The default value is `mono`.

`mipLevels` Optional

A number specifying desired number of mip levels. The default value is `1`.

`space` **Required**

An `XRSpace` object defining the layer's spatial relationship with the user's physical environment.

`textureType` Optional

A string defining the type of texture the layer will have. Possible values:

`texture`

The textures of `XRWebGLSubImage` will be of type `gl.TEXTURE_2D`.

`texture-array`

 the textures of `XRWebGLSubImage` will be of type `gl.TEXTURE_2D_ARRAY` (WebGL 2 contexts only).
 The default value is `texture`.

`transform` Optional

An `XRRigidTransform` object defining the offset and orientation relative to `space`.

`viewPixelHeight` **Required**

A number specifying the pixel height of the layer view.

`viewPixelWidth` **Required**

A number specifying the pixel width of the layer view.

`width` Optional

A number specifying the width of the layer in meters. The default value is `1.0`.

### Return value

An `XRQuadLayer` object.

Examples
--------

### Creating an `XRQuadLayer`

Configure the quad layer using the properties listed above in a call to `createQuadLayer()`. To present layers to the XR device, add them to the `layers` render state using `XRSession.updateRenderState()`.

```js
function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const quadLayer = xrGlBinding.createQuadLayer({
    space: xrReferenceSpace,
    viewPixelHeight: 512,
    viewPixelWidth: 512,
    transform: new XRRigidTransform({ z: -2 }),
  });
  xrSession.updateRenderState({
    layers: [quadLayer],
  });
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-createquadlayer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRQuadLayer`
* WebGL constants


XRWebGLBinding: createProjectionLayer() method - Web APIs

XRWebGLBinding: createProjectionLayer() method
==============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`createProjectionLayer()`** method of the `XRWebGLBinding` interface returns an `XRProjectionLayer` object which is a layer that fills the entire view of the observer and is refreshed close to the device's native frame rate.

Syntax
------

```js
createProjectionLayer(options)
```

### Parameters

`options`

An object to configure the `XRProjectionLayer`.

`textureType` Optional

An string defining the type of texture the layer will have. Possible values:

`texture`

The textures of `XRWebGLSubImage` will be of type `gl.TEXTURE_2D`.

`texture-array`

 The textures of `XRWebGLSubImage` will be of type `gl.TEXTURE_2D_ARRAY` (WebGL 2 contexts only).
 The default value is `texture`.

`colorFormat` Optional

A `GLenum` defining the data type of the color texture data. Possible values:

* `gl.RGB`
* `gl.RGBA`
 Additionally, for contexts with the `EXT_sRGB` extension enabled:
* `ext.SRGB_EXT`
* `ext.SRGB_ALPHA_EXT`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.RGBA8`
* `gl.RGB8`
* `gl.SRGB8`
* `gl.RGB8_ALPHA8`
 The default value is `gl.RGBA`.

`depthFormat` Optional

 A `GLenum` defining the data type of the depth texture data or `0` indicating that the layer should not provide a depth texture. (In that case `XRProjectionLayer.ignoreDepthValues` will be `true`.)
 Possible values within `WebGLRenderingContext` contexts with the `WEBGL_depth_texture` extension enabled, or within `WebGL2RenderingContext` contexts (no extension required):

* `gl.DEPTH_COMPONENT`
* `gl.DEPTH_STENCIL`
 Additionally, for `WebGL2RenderingContext` contexts:
* `gl.DEPTH_COMPONENT24`
* `gl.DEPTH24_STENCIL24`
 The default value is `gl.DEPTH_COMPONENT`.

`scaleFactor` Optional

A floating-point value which is used to scale the layer during compositing. A value of `1.0` represents the default pixel size for the frame buffer. (See also `XRWebGLLayer.getNativeFramebufferScaleFactor()`.) Unlike other layers, the `XRProjectionLayer` can't be created with an explicit pixel width and height, because the size is inferred by the hardware. (Projection layers fill the observer's entire view.)

### Return value

An `XRProjectionLayer` object.

Examples
--------

### Creating an `XRProjectionLayer` in a WebGL 2 context

The `textureType` option allows allocating a texture array instead, in which every `XRView` will be rendered into a separate level of the array. This allows for some rendering optimizations, such as the use of the `OVR_multiview2` extension available in WebGL 2 contexts.

```js
function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const projectionLayer = xrGlBinding.createProjectionLayer({
    textureType: "texture-array",
  });
  xrSession.updateRenderState({
    layers: [projectionLayer],
  });
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-createprojectionlayer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRProjectionLayer`
* WebGL constants


XRWebGLBinding: getViewSubImage() method - Web APIs

XRWebGLBinding: getViewSubImage() method
========================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`getViewSubImage()`** method of the `XRWebGLBinding` interface returns a `XRWebGLSubImage` object representing the WebGL texture to render for a view.

Syntax
------

```js
getViewSubImage(layer, view)
```

### Parameters

`layer`

The `XRProjectionLayer` to use for rendering (to render other layer types, see `XRWebGLBinding.getSubImage()`).

`view`

The `XRView` to use for rendering.

### Return value

A `XRWebGLSubImage` object.

### Exceptions

A `TypeError` is thrown,

* if `layer` is not in the session's `layer` array.
Examples
--------

### Rendering an `XRProjectionLayer`

The following example renders an `XRProjectionLayer` to a view.

```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const layer = xrGlBinding.createProjectionLayer({});
const framebuffer = gl.createFramebuffer();

xrSession.updateRenderState({ layers: [layer] });
xrSession.requestAnimationFrame(onXRFrame);

function onXRFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRFrame);

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

  for (const view in xrViewerPose.views) {
    const subImage = xrGlBinding.getViewSubImage(layer, view);
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      gl.COLOR\_ATTACHMENT0,
      gl.TEXTURE\_2D,
      subImage.colorTexture,
      0,
    );
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      gl.DEPTH\_ATTACHMENT,
      gl.TEXTURE\_2D,
      subImage.depthStencilTexture,
      0,
    );
    const viewport = subImage.viewport;
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    // Render from the viewpoint of xrView
  }
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-getviewsubimage |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRWebGLSubImage`


XRWebGLBinding: nativeProjectionScaleFactor property - Web APIs

XRWebGLBinding: nativeProjectionScaleFactor property
====================================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The read-only **`nativeProjectionScaleFactor`** property of the `XRWebGLBinding` interface represents the scaling factor by which the projection layer's resolution is multiplied by to get the native resolution of the WebXR device's frame buffer.

For more details, see `XRWebGLLayer.getNativeFramebufferScaleFactor()`.

Value
-----

A floating-point number representing by how much the device's native frame buffer size is scaled by.

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-nativeprojectionscalefactor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRWebGLLayer.getNativeFramebufferScaleFactor()`


XRWebGLBinding: getDepthInformation() method - Web APIs

XRWebGLBinding: getDepthInformation() method
============================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`getDepthInformation()`** method of the `XRWebGLBinding` interface returns an `XRWebGLDepthInformation` object containing WebGL depth information.

Syntax
------

```js
getDepthInformation(view)
```

### Parameters

`view`

An `XRView` object obtained from a viewer pose.

### Return value

An `XRWebGLDepthInformation` object.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if `"depth-sensing"` is not in the list of enabled features for this `XRSession`.

`InvalidStateError` `DOMException`

Thrown if the `XRFrame` is not active nor animated. Obtaining depth information is only valid within the `requestAnimationFrame()` callback.

`InvalidStateError` `DOMException`

Thrown if the session's `depthUsage` is not `"gpu-optimized"`.

Examples
--------

### Obtaining WebGL depth information

```js
const canvasElement = document.querySelector(".output-canvas");
const gl = canvasElement.getContext("webgl");
await gl.makeXRCompatible();

// Make sure to request a session with depth-sensing enabled
const session = navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["depth-sensing"],
  depthSensing: {
    usagePreference: ["gpu-optimized"],
    formatPreference: ["luminance-alpha"],
  },
});

const glBinding = new XRWebGLBinding(session, gl);

// …

// Obtain depth information in an active and animated frame
function rafCallback(time, frame) {
  session.requestAnimationFrame(rafCallback);
  const pose = frame.getViewerPose(referenceSpace);
  if (pose) {
    for (const view of pose.views) {
      const depthInformation = glBinding.getDepthInformation(view);
      if (depthInformation) {
        // Do something with the depth information
        // gl.bindTexture(gl.TEXTURE\_2D, depthInformation.texture);
        // …
      }
    }
  }
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Depth Sensing Module # dom-xrwebglbinding-getdepthinformation |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRWebGLDepthInformation.texture`


XRWebGLBinding: getSubImage() method - Web APIs

XRWebGLBinding: getSubImage() method
====================================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`getSubImage()`** method of the `XRWebGLBinding` interface returns a `XRWebGLSubImage` object representing the WebGL texture to render.

Syntax
------

```js
getSubImage(layer, frame)
getSubImage(layer, frame, eye)
```

### Parameters

`layer`

The `XRCompositionLayer` to use for rendering (can be all types of `XRCompositionLayer` objects except `XRProjectionLayer`, see `XRWebGLBinding.getViewSubImage()` for rendering projection layers).

`frame`

The `XRFrame` frame to use for rendering.

`eye` Optional

An optional `XRView.eye` indicating which view's eye to use for rendering. Possible values:

`left`

The `XRView` represents the point-of-view of the viewer's left eye.

`right`

The view represents the viewer's right eye.

`none`

 The view describes a monoscopic view, or the view otherwise doesn't represent a particular eye's point-of-view.
 Defaults to `none`.

### Return value

A `XRWebGLSubImage` object.

### Exceptions

A `TypeError` is thrown,

* if `layer` is not in the session's `layer` array.
* if `layer` is a `XRProjectionLayer`.
* if the layer's `layout` property is `default`.
* if the layer's `layout` property is `stereo` and `eye` is `none`.
Examples
--------

### Rendering an `XRQuadLayer`

The following example renders an `XRQuadLayer`.

```js
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const quadLayer = xrGlBinding.createQuadLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

// Position 2 meters away from the origin with a width and height of 1.5 meters
quadLayer.transform = new XRRigidTransform({ z: -2 });
quadLayer.width = 1.5;
quadLayer.height = 1.5;

const framebuffer = gl.createFramebuffer();
xrSession.updateRenderState({ layers: [quadLayer] });
xrSession.requestAnimationFrame(onXRFrame);

function onXRFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRFrame);

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  let subImage = xrGlBinding.getSubImage(quadLayer, xrFrame);
  gl.framebufferTexture2D(
    gl.FRAMEBUFFER,
    gl.COLOR\_ATTACHMENT0,
    subImage.colorTexture,
    0,
  );
  let viewport = subImage.viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  // Render content for the quad layer
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrwebglbinding-getsubimage |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRWebGLSubImage`