recursal/MDN huggingface dataset:
HTMLCanvasElement: transferControlToOffscreen() method
======================================================

Baseline 2023
-------------

Newly availableSince March 2023, 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 **`HTMLCanvasElement.transferControlToOffscreen()`** method transfers control to an `OffscreenCanvas` object, either on the main thread or on a worker.

Syntax
------


```js
transferControlToOffscreen()
```

### Parameters

None.

### Return value

An `OffscreenCanvas` object.

Examples
--------

The following example shows how to transfer control to an `OffscreenCanvas` object on the main thread.


```js
const htmlCanvas = document.createElement("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();
const gl = offscreen.getContext("webgl");

// Some drawing using the gl context…
```


The following example shows how to transfer control to an `OffscreenCanvas` object on a worker.


```js
const offscreen = document.querySelector("canvas").transferControlToOffscreen();
const worker = new Worker("myworkerurl.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
```

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

| Specification |
| --- |
| HTML Standard # dom-canvas-transfercontroltooffscreen-dev |

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

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

See also
--------

* The interface defining this method, `HTMLCanvasElement`
* `OffscreenCanvas`
HTMLCanvasElement: contextlost event
====================================

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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`contextlost`** event of the Canvas API is fired if the user agent detects that the backing storage associated with a `CanvasRenderingContext2D` context is lost.
 Contexts can be lost for several reasons like driver crashes or the application runs out of memory, etc.

 By default the user agent will attempt to restore the context and then fire the `contextrestored` event.
 User code can prevent the context from being restored by calling `Event.preventDefault()` during event handling.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("contextlost", (event) => {});

oncontextlost = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------

The code fragment below detects the `contextlost` event.


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

canvas.addEventListener("contextlost", (event) => {
  console.log(event);
});
```


To prevent the context from being restored the code might instead look like this:


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

canvas.addEventListener("contextlost", (event) => {
  event.preventDefault();
});
```

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

| Specification |
| --- |
| HTML Standard # event-contextlost |

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

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

See also
--------

* `HTMLCanvasElement: contextrestored` event
* `CanvasRenderingContext2D.isContextLost()`
HTMLCanvasElement: webglcontextrestored event
=============================================

The **`webglcontextrestored`** event of the WebGL API is fired if the user agent restores the drawing buffer for a `WebGLRenderingContext` object.

Once the context is restored, WebGL resources such as textures and buffers that were created before the context was lost are no longer valid. You need to reinitialize the state of your WebGL application and recreate resources.

This event does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("webglcontextrestored", (event) => {});

onwebglcontextrestored = (event) => {};
```

Event type
----------

A `WebGLContextEvent`. Inherits from `Event`.

Event

WebGLContextEventEvent properties
----------------

*This interface inherits properties from its parent interface, `Event`.*

`WebGLContextEvent.statusMessage`

A read-only property containing additional information about the event.

Example
-------

With the help of the `WEBGL_lose_context` extension, you can simulate the `webglcontextrestored` event:


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

canvas.addEventListener(
  "webglcontextrestored",
  (e) => {
    console.log(e);
  },
  false,
);

gl.getExtension("WEBGL\_lose\_context").restoreContext();

// "webglcontextrestored" event is logged.
```

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

| Specification |
| --- |
| WebGL Specification # 5.15.3 |

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

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

See also
--------

* `WebGLContextEvent`
* `WebGLRenderingContext.isContextLost()`
* `WEBGL_lose_context`, `WEBGL_lose_context.loseContext()`, `WEBGL_lose_context.restoreContext()`
HTMLCanvasElement: webglcontextlost event
=========================================

The **`webglcontextlost`** event of the WebGL API is fired if the user agent detects that the drawing buffer associated with a `WebGLRenderingContext` object has been lost.

This event does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("webglcontextlost", (event) => {});

onwebglcontextlost = (event) => {};
```

Event type
----------

A `WebGLContextEvent`. Inherits from `Event`.

Event

WebGLContextEventEvent properties
----------------

*This interface inherits properties from its parent interface, `Event`.*

`WebGLContextEvent.statusMessage`

A read-only property containing additional information about the event.

Example
-------

With the help of the `WEBGL_lose_context` extension, you can simulate the `webglcontextlost` event:


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

canvas.addEventListener("webglcontextlost", (event) => {
  console.log(event);
});

gl.getExtension("WEBGL\_lose\_context").loseContext();

// "webglcontextlost" event is logged.
```

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

| Specification |
| --- |
| WebGL Specification # 5.15.2 |

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

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

See also
--------

* `WebGLContextEvent`
* `WebGLRenderingContext.isContextLost()`
* `WEBGL_lose_context`, `WEBGL_lose_context.loseContext()`, `WEBGL_lose_context.restoreContext()`
HTMLCanvasElement: width property
=================================

 The **`HTMLCanvasElement.width`** property is a
 positive `integer` reflecting the `width` HTML
 attribute of the `<canvas>` element interpreted in CSS pixels. When the
 attribute is not specified, or if it is set to an invalid value, like a negative, the
 default value of `300` is used.

 This is one of the two properties, the other being
 `HTMLCanvasElement.height`, that controls the size of the canvas.

Value
-----

A number.

Examples
--------

Given this `<canvas>` element:


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


You can get the width of the canvas with the following code:


```js
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300
```

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

| Specification |
| --- |
| HTML Standard # dom-canvas-height |

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

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

See also
--------

* `HTMLCanvasElement`: Interface used to define the `HTMLCanvasElement.width` property
* `HTMLCanvasElement.height`: Other property used to control the size of the canvas
* `HTMLImageElement.width`
* `HTMLObjectElement.width`
* `HTMLVideoElement.width`
XRCompositionLayer: destroy() method
====================================

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

The **`destroy()`** method of the `XRCompositionLayer` interface deletes the references to the underlying graphics library for the layer. It also sets the color textures and depth stencil texture arrays to an empty array.

Syntax
------


```js
destroy()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Deleting a layer

Call `destroy()` to delete a layer.


```js
myLayer.destroy();
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcompositionlayer-destroy |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRCompositionLayer: blendTextureSourceAlpha property
====================================================

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

The **`blendTextureSourceAlpha`** property of the `XRCompositionLayer` interface is a boolean enabling the layer's texture alpha channel.

Value
-----

A boolean. `true` enables the alpha channel, `false` disables it.

Examples
--------

### Setting a layer's texture alpha channel

The following code snippet toggles a layer to opaque and back.


```js
myLayer.blendTextureSourceAlpha = !myLayer.blendTextureSourceAlpha;
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcompositionlayer-blendtexturesourcealpha |

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

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

See also
--------

* Alpha channel
XRCompositionLayer: layout property
===================================

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

The read-only **`layout`** property of the `XRCompositionLayer` interface is the layout type of the layer.

To specify the layout type of a layer, use one of the layer creation methods and their `layout` option:

* `XRWebGLBinding.createQuadLayer()`
* `XRWebGLBinding.createCylinderLayer()`
* `XRWebGLBinding.createEquirectLayer()`
* `XRWebGLBinding.createCubeLayer()`
Value
-----

A string. Possible values:

`default`

The layer accommodates all views of the session. It is recommended to use the `texture-array` texture type for `default` layouts.

`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). It is recommended to use the `texture-array` texture type for `stereo` layouts.

`stereo-left-right`

A single `XRSubImage` is allocated. Left eye gets the left area of the texture, right eye the right. This layout is designed to minimize draw calls for content that is already in stereo (for example stereo videos or images).

`stereo-top-bottom`

A single `XRSubImage` is allocated. Left eye gets the top area of the texture, right eye the bottom. This layout is designed to minimize draw calls for content that is already in stereo (for example stereo videos or images).

Examples
--------

### Setting and getting a layer's layout

To specify a layer's layout, use a layer creation method (like `XRWebGLBinding.createQuadLayer()`) and its `layout` option. To retrieve the type of layer layout, use the `layout` property:


```js
const layer = xrGlBinding.createQuadLayer({
  pixelWidth: 1024,
  pixelHeight: 768,
  layout: "stereo",
});

layer.layout; // "stereo"
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcompositionlayer-layout |

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

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

See also
--------

* `XRSubImage`
* `XRWebGLBinding.createQuadLayer()`
* `XRWebGLBinding.createCylinderLayer()`
* `XRWebGLBinding.createEquirectLayer()`
* `XRWebGLBinding.createCubeLayer()`
XRCompositionLayer: needsRedraw property
========================================

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

The read-only **`needsRedraw`** property of the `XRCompositionLayer` interface is a boolean signaling that the layer should be re-rendered in the next frame.

The need for redrawing can occur when the underlying resources of a layer are lost due to textures that might have been freed by the compositor under the hood. This might happen when the device falls asleep or when the browser switches context (to an operating system dialog or similar) and then comes back.

Redrawing is not a problem for layers which are updated with every frame. However, for layers updated infrequently, or for static layers (where you can only draw once after creation or after a `redraw` event), the layer's content might be lost and need to be redrawn. If the layer's resources are lost, the `needsRedraw` property will be `true` and a `redraw` event is fired on the layer.

Value
-----

A boolean. `true` indicates a rerendering is needed in the next frame, `false` indicates no re-rendering is needed.

Examples
--------

### Redrawing layers

Use the `needsRedraw` property to check if a layer needs to be redrawn and then redraw it.


```js
function onXRFrame(time, frame) {
  // …

  if (quadLayer.needsRedraw) {
    // redraw the layer
  }
}
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcompositionlayer-needsredraw |

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

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

See also
--------

* `XREquirectLayer`: `redraw` event
* `XRCubeLayer`: `redraw` event
* `XRCylinderLayer`: `redraw` event
* `XRQuadLayer`: `redraw` event
XRCompositionLayer: mipLevels property
======================================

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

The read-only **`mipLevels`** property of the `XRCompositionLayer` interface is a layer's number of mip levels in the color and texture data. See also Mipmap on Wikipedia.

The desired number of mip levels can be specified when creating layers. However, if the user agent can't create the requested number, it can create less. Use `mipLevels` to determine the actual number of mip levels for a layer.

The `viewPixelWidth` and `viewPixelHeight` need to be powers of two as they get successively halved at each mip level.

Value
-----

A number equal or smaller to the requested mip levels when a layer has been created.

Examples
--------

### Getting a layer's mip levels

The `mipLevels` property indicates the actual number of mip levels that have been created. In this example, the desired number of 5 mip levels that had been requested for an `XRQuadLayer` could be full-filled.


```js
let xrGLBinding = new XRWebGLBinding(session, gl);
let quadLayer = xrGLBinding.createQuadLayer({
  space: refSpace,
  viewPixelHeight: 512,
  viewPixelWidth: 512,
  width: 1.0,
  height: 1.0,
  mipLevels: 5,
  transform: new XRRigidTransform({
    /\* … \*/
  }),
});

quadLayer.mipLevels; // 5
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcompositionlayer-miplevels |

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

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

See also
--------

* Mipmap on Wikipedia
CSSMathValue: operator property
===============================

 The **`CSSMathValue.operator`** read-only
 property of the `CSSMathValue` interface indicates the operator that the
 current subtype represents. For example, if the current `CSSMathValue`
 subtype is `CSSMathSum`, this property will return the string
 `"sum"`.

Value
-----

A `String`.

| Interface | Value |
| --- | --- |
| `CSSMathSum` | `"sum"` |
| `CSSMathProduct` | `"product"` |
| `CSSMathMin` | `"min"` |
| `CSSMathMax` | `"max"` |
| `CSSMathClamp` | `"clamp"` |
| `CSSMathNegate` | `"negate"` |
| `CSSMathInvert` | `"invert"` |

Examples
--------

 We create an element with a `width`
 determined using a `calc()` function,
 then `console.log()` the
 `operator`.


```html
<div>My width has a <code>calc()</code> function</div>
```


We assign a `width` with a calculation


```css
div {
  width: calc(50% - 0.5vw);
}
```


We add the JavaScript


```js
const styleMap = document.querySelector("div").computedStyleMap();

console.log(styleMap.get("width")); // CSSMathSum {values: CSSNumericArray, operator: "sum"}
console.log(styleMap.get("width").values); // CSSNumericArray {0: CSSUnitValue, 1: CSSMathNegate, length: 2}
console.log(styleMap.get("width").operator); // 'sum'
console.log(styleMap.get("width").values[1].operator); // 'negate'
```


 The `CSSMathValue.operator` returns `sum` for the equation and
 `negate` for the operator on the second value.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathvalue-operator |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: close() method
===============================

 The `MediaKeySession.close()` method notifies that the current media session
 is no longer needed, and that the content decryption module should release any resources
 associated with this object and close it. Then, it returns a `Promise`.

Syntax
------


```js
close()
```

### Parameters

None.

### Return value

A `Promise`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-close |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: keyStatuses property
=====================================

 The **`MediaKeySession.keyStatuses`** read-only property
 returns a reference to a read-only `MediaKeyStatusMap` of the current
 session's keys and their statuses.

Value
-----

A `MediaKeyStatusMap`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-keystatuses |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: generateRequest() method
=========================================

 The `MediaKeySession.generateRequest()` method returns a
 `Promise` after generating a media request based on initialization data.

Syntax
------


```js
generateRequest()
```

### Parameters

None.

### Return value

A `Promise`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-generaterequest |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: closed property
================================

 The `MediaKeySession.closed` read-only property returns a
 `Promise` signaling when a `MediaKeySession` closes. This
 promise can only be fulfilled and is never rejected. Closing a session means that
 licenses and keys associated with it are no longer valid for decrypting media data.

Value
-----

A `Promise`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-closed |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: load() method
==============================

 The `MediaKeySession.load()` method returns a `Promise` that
 resolves to a boolean value after loading data for a specified session object.

Syntax
------


```js
load(sessionId)
```

### Parameters

`sessionId`

 A unique string generated by the content description module for the current media
 object and its associated keys or licenses.


### Return value

 A `Promise` that resolves to a boolean indicating whether the load
 succeeded or failed.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-load |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: sessionId property
===================================

 The **`MediaKeySession.sessionId`** is a read-only property
 that contains a unique string generated by the content decryption module (CDM) for the
 current media object and its associated keys or licenses.

Value
-----

A string.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-sessionid |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: update() method
================================

 The `MediaKeySession.update()` method loads messages and licenses to the
 CDM, and then returns a `Promise` .

Syntax
------


```js
update(response)
```

### Parameters

`response`

An instance that is either an `ArrayBuffer`, a `TypedArray`, or a `DataView`.

### Return value

A `Promise`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-update |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: remove() method
================================

The `MediaKeySession.remove()` method returns a `Promise` after removing any session data associated with the current object.

Syntax
------


```js
remove()
```

### Parameters

None.

### Return value

None (`undefined`).

Return value
------------

A `Promise` that resolves to a boolean indicating whether the load succeeded or failed.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-remove |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaKeySession: message event
==============================

 The **`message`** event of the
 `MediaKeySession` interface fires when a message is generated by the
 content decryption module.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

Event type
----------

A `MediaKeyMessageEvent`. Inherits from `Event`.

Event

MediaKeyMessageEventEvent properties
----------------

`MediaKeyMessageEvent.message` Read only 

Returns an `ArrayBuffer` with a message from the content decryption module. Messages vary by key system.

`MediaKeyMessageEvent.messageType` Read only 

Indicates the type of message. May be one of `license-request`, `license-renewal`, `license-release`, or `individualization-request`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeysession-onmessage |

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

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