recursal/MDN huggingface dataset:
CanvasRenderingContext2D: lineCap property
==========================================

 The
 **`CanvasRenderingContext2D.lineCap`**
 property of the Canvas 2D API determines the shape used to draw the end points of lines.


**Note:** Lines can be drawn with the
 `stroke()`, `strokeRect()`,
 and `strokeText()` methods.


Value
-----

One of the following:

`"butt"`

The ends of lines are squared off at the endpoints. Default value.

`"round"`

The ends of lines are rounded.

`"square"`

 The ends of lines are squared off by adding a box with an equal width and half the
 height of the line's thickness.


Examples
--------

### Changing the shape of line caps

This example rounds the end caps of a straight line.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
```


#### Result

### Comparison of line caps

 In this example three lines are drawn, each with a different value for the
 `lineCap` property. Two guides to see the exact differences between the three
 are added. Each of these lines starts and ends exactly on these guides.

 The line on the left uses the default `"butt"` option. It's drawn completely
 flush with the guides. The second is set to use the `"round"` option. This
 adds a semicircle to the end that has a radius half the width of the line. The line on
 the right uses the `"square"` option. This adds a box with an equal width and
 half the height of the line thickness.
```

<canvas id="canvas" width="150" height="150"></canvas>
```



```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = "black";
["butt", "round", "square"].forEach((lineCap, i) => {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap;
  ctx.beginPath();
  ctx.moveTo(25 + i \* 50, 10);
  ctx.lineTo(25 + i \* 50, 140);
  ctx.stroke();
});
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-linecap-dev |

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

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

### WebKit/Blink-specific notes

* In WebKit- and Blink-based Browsers, a non-standard and deprecated method
 `ctx.setLineCap()` is implemented in addition to this property.
See also
--------

* The interface defining this property: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineWidth`
* `CanvasRenderingContext2D.lineJoin`
* Applying styles and color
CanvasRenderingContext2D: stroke() method
=========================================

 The
 **`CanvasRenderingContext2D.stroke()`**
 method of the Canvas 2D API strokes (outlines) the current or given path with the
 current stroke style.

 Strokes are aligned to the center of a path; in other words, half of the stroke is
 drawn on the inner side, and half on the outer side.

 The stroke is drawn using the non-zero winding rule, which
 means that path intersections will still get filled.

Syntax
------


```js
stroke()
stroke(path)
```

### Parameters

`path`

A `Path2D` path to stroke.

### Return value

None (`undefined`).

Examples
--------

### A simple stroked rectangle

 This example creates a rectangle using the `rect()` method, and then draws
 it to the canvas using `stroke()`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.stroke();
```


#### Result

### Re-stroking paths

 Typically, you'll want to call `beginPath()` for each new thing you want to stroke. If you don't, the previous
 sub-paths will remain part of the current path, and get stroked every time you call the
 `stroke()` method. In some cases, however, this may be the desired effect.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

 This code strokes the first path three times, the second path two times, and the third
 path only once.


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// First sub-path
ctx.lineWidth = 26;
ctx.strokeStyle = "orange";
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();

// Second sub-path
ctx.lineWidth = 14;
ctx.strokeStyle = "green";
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();

// Third sub-path
ctx.lineWidth = 4;
ctx.strokeStyle = "pink";
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();
```


#### Result

### Stroking and filling

 If you want to both stroke and fill a path, the order in which you perform these
 actions will determine the result. In this example, the square on the left is drawn with
 the stroke on top of the fill. The square on the right is drawn with the fill on top of
 the stroke.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 16;
ctx.strokeStyle = "red";

// Stroke on top of fill
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();

// Fill on top of stroke
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-stroke-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: `CanvasRenderingContext2D`
FeaturePolicy: allowsFeature() method
=====================================

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

 The **`allowsFeature()`** method of
 the `FeaturePolicy` interface enables introspection of individual
 directives of the Permissions Policy it is run on. It returns a `Boolean`
 that is `true` if and only if the specified feature is allowed in the
 specified context (or the default context if no context is specified).

Syntax
------


```js
allowsFeature(feature)
allowsFeature(feature, origin)
```

### Parameters

`feature`

The specific feature name to check its availability.

`origin` Optional

The specific origin name to check its availability. If not specificed, the default origin will be used.

### Return value

 A `Boolean` that is `true` if and only if the feature is
 allowed.

Example
-------

 The following example queries whether or not the document is allowed to use camera API
 by the Permissions Policy. Please note that Camera API might be restricted by the
 Permissions API, if the user did not grant the corresponding permission yet.


```js
// First, get the Feature Policy object
const featurePolicy = document.featurePolicy;

// Then query feature for specific
const allowed = featurePolicy.allowsFeature("camera");

if (allowed) {
  console.log("FP allows camera.");
} else {
  console.log("FP does not allows camera.");
}
```

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

#### No specification found

No specification data found for `api.FeaturePolicy.allowsFeature`.  
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.
FeaturePolicy: features() method
================================

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

 The **`features()`** method of the
 `FeaturePolicy` interface returns a list of names of all features
 supported by the User Agent. Feature whose name appears on the list might not be
 allowed by the Permissions Policy of the current execution context and/or might not be
 accessible because of user's permissions.

Syntax
------


```js
features()
```

### Parameters

None.

### Return value

 A list of strings that represent names of all Permissions Policy directives supported by
 the user agent.

Example
-------

The following example logs all the supported directives in the console.


```js
// Get the FeaturePolicy object
const featurePolicy = document.featurePolicy;

// Retrieve the list of all supported Permissions Policy directives
const supportedDirectives = featurePolicy.features();

// Print out each directive into the console
for (const directive of supportedDirectives) {
  console.log(directive);
}
```

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

#### No specification found

No specification data found for `api.FeaturePolicy.features`.  
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.
FeaturePolicy: allowedFeatures() method
=======================================

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

 The **`allowedFeatures()`** method of
 the `FeaturePolicy` interface returns a list of directive names of all
 features allowed by the Permissions Policy. This enables introspection of individual directives
 of the Permissions Policy it is run on. As such, `allowedFeatures()` method
 returns a subset of directives returned by `features()`.

Syntax
------


```js
allowedFeatures()
```

### Parameters

None.

### Return value

 An array of strings representing the Permissions Policy directive names that are allowed by
 the Permissions Policy this method is called on.

Example
-------

 The following example logs all the allowed directives for the current document. Please
 note that these features might be restricted by the Permissions API, if the user did not
 grant the corresponding permission yet.


```js
// First, get the Permissions Policy object
const featurePolicy = document.featurePolicy;

// Then query feature for specific
const allowed = featurePolicy.allowedFeatures();

for (const directive of allowed) {
  console.log(directive);
}
```

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

#### No specification found

No specification data found for `api.FeaturePolicy.allowedFeatures`.  
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.
FeaturePolicy: getAllowlistForFeature() method
==============================================

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

 The **`getAllowlistForFeature()`**
 method of the `FeaturePolicy` interface enables querying of the allowlist for a specific feature for the current Permissions Policy.

Syntax
------


```js
getAllowlistForFeature(feature)
```

### Parameter

`feature`

The specific feature name to get its allowlist.

### Return value

An array of strings containing the serialized list of allowed origins for the feature. If a wildcard (`*`) is used, the array will contain `*`.

Errors
------

 The function will raise a warning if the specified Permissions Policy directive name is not
 known. However, it will also return empty array, indicating that no origin is allowed to
 use the feature.

Example
-------

 The following example prints all the origins that are allowed to use Camera API by the
 Permissions Policy. Please note that Camera API might also be restricted by the Permissions API, if the user did not grant the corresponding permission.


```js
// First, get the FeaturePolicy object
const featurePolicy = document.featurePolicy;

// Query for specific feature
const allowlist = featurePolicy.getAllowlistForFeature("camera");

for (const origin of allowlist) {
  console.log(origin);
}
```

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

#### No specification found

No specification data found for `api.FeaturePolicy.getAllowlistForFeature`.  
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.
CSSVariableReferenceValue: fallback property
============================================

 The **`fallback`** read-only property of the
 `CSSVariableReferenceValue` interface returns the custom property fallback value of the `CSSVariableReferenceValue`.

Value
-----

A `CSSUnparsedValue`.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssvariablereferencevalue-fallback |

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

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

 The **`variable`** property of the
 `CSSVariableReferenceValue` interface returns the custom property name of the
 `CSSVariableReferenceValue`.

Value
-----

A string beginning with `--` (that is, a custom property name).

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssvariablereferencevalue-variable |

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

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

Creates a new `CSSVariableReferenceValue`.

Syntax
------


```js
new CSSVariableReferenceValue(variable)
new CSSVariableReferenceValue(variable, fallback)
```

### Parameters

`variable`

A custom property name.

`fallback` Optional

A custom property fallback value.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssvariablereferencevalue-cssvariablereferencevalue |

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

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

 The **`CSSMathNegate()`** constructor creates a
 new `CSSMathNegate` object which negates the value passed into it.

Syntax
------


```js
new CSSMathNegate(arg)
```

### Parameters

`arg`

A `CSSNumericValue`.

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathnegate-cssmathnegate |

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

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

 The CSSMathNegate.value read-only property of the
 `CSSMathNegate` interface returns a `CSSNumericValue` object.

Value
-----

A `CSSNumericValue`.

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathnegate-value |

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

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

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

 The **`label`** property of the
 `GPUBindGroupLayout` interface provides a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createBindGroupLayout()` call, or you can get and set it directly on the `GPUBindGroupLayout` object.

Value
-----

A string. If this has not been previously set as described above, it will be an empty string.

Examples
--------

Setting and getting a label via `GPUBindGroupLayout.label`:


```js
// ...

const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.COMPUTE,
      buffer: {
        type: "storage",
      },
    },
  ],
});

bindGroupLayout.label = "mybindgrouplayout";

console.log(bindGroupLayout.label); // "mybindgrouplayout";
```


Setting a label via the originating `GPUDevice.createBindGroupLayout()` call, and then getting it via `GPUBindGroupLayout.label`:


```js
// ...

const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.COMPUTE,
      buffer: {
        type: "storage",
      },
    },
  ],
  label: "mybindgrouplayout",
});

console.log(bindGroupLayout.label); // "mybindgrouplayout";
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API
MessageEvent: ports property
============================

 The **`ports`** read-only property of the
 `MessageEvent` interface is an array of `MessagePort` objects
 representing the ports associated with the channel the message is being sent through
 (where appropriate, e.g. in channel messaging or when sending a message to a shared
 worker).

Value
-----

An array of `MessagePort` objects.

Examples
--------


```js
onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
```

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

| Specification |
| --- |
| HTML Standard # dom-messageevent-ports-dev |

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

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

See also
--------

* `ExtendableMessageEvent` — similar to this interface but used in
 interfaces that needs to give more flexibility to authors.
MessageEvent: origin property
=============================

 The **`origin`** read-only property of the
 `MessageEvent` interface is a string representing the
 origin of the message emitter.

Value
-----

A string representing the origin.

Examples
--------


```js
myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
  console.log(e.origin);
};
```

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

| Specification |
| --- |
| HTML Standard # dom-messageevent-origin-dev |

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

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

See also
--------

* `ExtendableMessageEvent` — similar to this interface but used in
 interfaces that needs to give more flexibility to authors.
MessageEvent: MessageEvent() constructor
========================================

The **`MessageEvent()`** constructor creates a new `MessageEvent` object.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `message`.


`options` Optional

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

`data` Optional

 The data you want contained in the MessageEvent.
 This can be of any data type, and will default to `null` if not specified.


`origin` Optional

 A string representing the origin of the message emitter.
 This defaults to an empty string (`''`) if not specified.


`lastEventId` Optional

 A string representing a unique ID for the event.
 This defaults to an empty string ("") if not specified.


`source` Optional

 A `MessageEventSource` (which can be a `Window`, a `MessagePort`,
 or a `ServiceWorker` object) representing the message emitter.
 This defaults to `null` if not set.


`ports` Optional

 An array of `MessagePort` objects representing
 the ports associated with the channel the message is being sent through where appropriate
 (E.g. in channel messaging or when sending a message to a shared worker).
 This defaults to an empty array (`[]`) if not specified.



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

A new `MessageEvent` object.

Examples
--------


```js
const myMessage = new MessageEvent("message", {
  data: "hello",
});
```

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

| Specification |
| --- |
| HTML Standard # the-messageevent-interface:dom-event-constructor |

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

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

See also
--------

* `ExtendableMessageEvent` — similar to this interface but used in interfaces that needs to give more flexibility to authors.
MessageEvent: lastEventId property
==================================

 The **`lastEventId`** read-only property of the
 `MessageEvent` interface is a string representing a
 unique ID for the event.

Value
-----

A string representing the ID.

Examples
--------


```js
myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
  console.log(e.lastEventId);
};
```

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

| Specification |
| --- |
| HTML Standard # dom-messageevent-lasteventid-dev |

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

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

See also
--------

* `ExtendableMessageEvent` — similar to this interface but used in
 interfaces that needs to give more flexibility to authors.
MessageEvent: data property
===========================

 The **`data`** read-only property of the
 `MessageEvent` interface represents the data sent by the message emitter.

Value
-----

The data sent by the message emitter; this can be any data type, depending on what originated this event.

Examples
--------


```js
myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
};
```

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

| Specification |
| --- |
| HTML Standard # dom-messageevent-data-dev |

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

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

See also
--------

* `ExtendableMessageEvent` — similar to this interface but used in
 interfaces that needs to give more flexibility to authors.
MessageEvent: source property
=============================

 The **`source`** read-only property of the
 `MessageEvent` interface is a `MessageEventSource` (which can be
 a WindowProxy, `MessagePort`, or
 `ServiceWorker` object) representing the message emitter.

Value
-----

 a `MessageEventSource` (which can be a WindowProxy,
 `MessagePort`, or `ServiceWorker` object) representing the
 message emitter.

Examples
--------


```js
myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
  console.log(e.source);
};
```

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

| Specification |
| --- |
| HTML Standard # dom-messageevent-source-dev |

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

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

See also
--------

* `ExtendableMessageEvent` — similar to this interface but used in
 interfaces that needs to give more flexibility to authors.