recursal/MDN huggingface dataset:
Navigator: connection property
==============================

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

The **`Navigator.connection`** read-only property returns a `NetworkInformation` object containing information about the system's connection, such as the current bandwidth of the user's device or whether the connection is metered.

This could be used to select high definition content or low definition content based on the user's connection.

Value
-----

A `NetworkInformation` object.

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

| Specification |
| --- |
| Network Information API # connection-attribute |

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

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

See also
--------

* Online and offline events
Navigator: appName 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.

 The value of the **`Navigator.appName`** property is always
 "`Netscape`", in any browser. This property is kept only for compatibility
 purposes.

**Note:** Do not rely on this property to return a real browser name. All browsers return "`Netscape`" as the value of this property.

Value
-----

The string "`Netscape`".

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

| Specification |
| --- |
| HTML Standard # dom-navigator-appname-dev |

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

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

See also
--------

* `Navigator.appCodeName`
* `Navigator.product`
Navigator: product 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.

 The value of the **`Navigator.product`** property is always
 "`Gecko`", in any browser. This property is kept only for compatibility
 purposes.

**Note:** Do not rely on this property to return a real product name. All browsers return "`Gecko`" as the value of this property.

Value
-----

The string "`Gecko`".

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

| Specification |
| --- |
| HTML Standard # dom-navigator-product-dev |

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

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

See also
--------

* `Navigator.appCodeName`
* `Navigator.appName`
Navigator: virtualKeyboard property
===================================

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

 The **`virtualKeyboard`** read-only property
 of the `navigator` interface returns a reference to the `VirtualKeyboard` instance object.

The VirtualKeyboard API gives developers control over the layout of their applications when the on-screen virtual keyboard appears and disappears on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.

Value
-----

A `VirtualKeyboard` object you can use to opt-out of the automatic virtual keyboard behavior, show or hide the virtual keyboard programmatically, and get the current position and size of the virtual keyboard.

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

| Specification |
| --- |
| VirtualKeyboard API # dom-navigator-virtualkeyboard |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Navigator: buildID 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.

Returns the build identifier of the browser. In modern browsers this property now returns a fixed timestamp as a privacy measure, e.g. `20181001000000` in Firefox 64 onwards.

Value
-----

A string representing the build identifier of the application. The build ID is in the form `YYYYMMDDHHMMSS`.

Examples
--------


```js
console.log(navigator.buildID);
```

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

Not part of any public standard.

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

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

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

The **`ink`** read-only property of the `Navigator` interface returns an `Ink` object for the current document, providing access to Ink API functionality.

Value
-----

An `Ink` object.

Example
-------


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

  //...
}
```

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

| Specification |
| --- |
| Ink API # navigator-interface-extensions |

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

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

See also
--------

* Enhancing Inking on the Web
Navigator: storage property
===========================

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

 The **`Navigator.storage`**
 read-only property returns the singleton `StorageManager` object used to
 access the overall storage capabilities of the browser for the current site or app.
 The returned object lets you examine and configure persistence of data stores and
 learn approximately how much more space your browser has available for local storage
 use.

Value
-----

 A `StorageManager` object you can use to maintain persistence for stored
 data, as well as to determine roughly how much room there is for data to be stored.

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

| Specification |
| --- |
| Storage Standard # dom-navigatorstorage-storage |

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

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

See also
--------

* `StorageManager`
* `Navigator`
Navigator: platform 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.

The **`platform`** property read-only property of the `Navigator` interface returns a string identifying the platform on which the user's browser is running.

**Note:** In general, you should whenever possible avoid writing code that uses methods or properties like this one to try to find out information about the user's environment, and instead write code that does feature detection.

Value
-----

A string identifying the platform on which the user's browser is running; for example: `"MacIntel"`, `"Win32"`, `"Linux x86_64"`, `"Linux armv81"`.

Examples
--------

`navigator.platform` should almost always be avoided in favor of feature detection. But there is one case where, among the options you could use, `navigator.platform` may be the least-bad option: When you need to show users advice about whether the modifier key for keyboard shortcuts is the `⌘` command key (found on Apple systems) rather than the `⌃` control key (on non-Apple systems):


```js
let modifierKeyPrefix = "^"; // control key
if (
  navigator.platform.indexOf("Mac") === 0 ||
  navigator.platform === "iPhone"
) {
  modifierKeyPrefix = "⌘"; // command key
}
```


That is, check if `navigator.platform` starts with `"Mac"` or else is an exact match for `"iPhone"`, and then based on whether either of those is true, choose the modifier key your web application's UI will advise users to press in keyboard shortcuts.

Usage notes
-----------

On Windows, modern browsers return `"Win32"` even if running on a 64-bit version of Windows.

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

| Specification |
| --- |
| HTML Standard # dom-navigator-platform-dev |

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

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

See also
--------

* `navigator.userAgentData.platform`
Navigator: mediaSession property
================================

 The read-only **`mediaSession`** property of the `Navigator`
 interface returns a `MediaSession`
 object that can be used to share with the browser metadata and other information about
 the current playback state of media being handled by a document.

 This
 information may, in turn, be shared with the device and/or operating system in order to
 a device's standard media control user experience to describe and control the playback
 of the media.

 In addition, the `MediaSession` interface provides the
 `setActionHandler()` method, which lets
 you receive events when the user engages device controls such as either onscreen or
 physical play, pause, seek, and other similar controls. An internet radio app, for
 example, can use `setActionHandler()` to let the media controls on a keyboard
 or elsewhere on the user's device be used to control the app's media playback.

Value
-----

 A `MediaSession` object the current document can use to share information
 about media it's playing and its current playback status. This information can include
 typical metadata such as the title, artist, and album name of the song being played as
 well as potentially one or more images containing things like album art, artist photos,
 and so forth.

Examples
--------

 In this example, metadata is submitted to the `mediaSession` object. Note
 that the code begins by ensuring that the `navigator.mediaSession` property
 is available before attempting to use it.


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Podcast Episode Title",
    artist: "Podcast Host",
    album: "Podcast Name",
    artwork: [{ src: "podcast.jpg" }],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-navigator-mediasession |

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

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

 The
 **`CanvasRenderingContext2D.textAlign`**
 property of the Canvas 2D API specifies the current text alignment used when drawing
 text.

 The alignment is relative to the `x` value of the
 `fillText()` method. For example, if
 `textAlign` is `"center"`, then the text's left edge will be at
 `x - (textWidth / 2)`.

Value
-----

Possible values:

`"left"`

The text is left-aligned.

`"right"`

The text is right-aligned.

`"center"`

The text is centered.

`"start"`

 The text is aligned at the normal start of the line (left-aligned for left-to-right
 locales, right-aligned for right-to-left locales).


`"end"`

 The text is aligned at the normal end of the line (right-aligned for left-to-right
 locales, left-aligned for right-to-left locales).


The default value is `"start"`.

Examples
--------

### General text alignment

 This example demonstrates the three "physical" values of the `textAlign`
 property: `"left"`, `"center"`, and `"right"`.

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = "30px serif";

ctx.textAlign = "left";
ctx.fillText("left-aligned", x, 40);

ctx.textAlign = "center";
ctx.fillText("center-aligned", x, 85);

ctx.textAlign = "right";
ctx.fillText("right-aligned", x, 130);
```


#### Result

### Direction-dependent text alignment

 This example demonstrates the two direction-dependent values of the
 `textAlign` property: `"start"` and `"end"`. Note that
 the `direction` property is manually
 specified as `"ltr"`, although this is also the default for English-language
 text.

#### HTML


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


#### JavaScript


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

ctx.font = "30px serif";
ctx.direction = "ltr";

ctx.textAlign = "start";
ctx.fillText("Start-aligned", 0, 50);

ctx.textAlign = "end";
ctx.fillText("End-aligned", canvas.width, 120);
```


#### Result

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

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

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

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

See also
--------

* The interface defining this property: `CanvasRenderingContext2D`
CanvasRenderingContext2D: createConicGradient() method
======================================================

The **`CanvasRenderingContext2D.createConicGradient()`** method of the Canvas 2D API creates a gradient around a point with given coordinates.

This method returns a conic `CanvasGradient`. To be applied to a shape, the gradient must first be assigned to the `fillStyle` or `strokeStyle` properties.

**Note:** Gradient coordinates are global, i.e., relative to the current coordinate space. When applied to a shape, the coordinates are NOT relative to the shape's coordinates.

Syntax
------


```js
createConicGradient(startAngle, x, y)
```

### Parameters

`startAngle`

The angle at which to begin the gradient, in radians. The angle starts from a line going horizontally right from the center, and proceeds clockwise.

`x`

The x-axis coordinate of the center of the gradient.

`y`

The y-axis coordinate of the center of the gradient.

### Return value

`CanvasGradient`

A conic `CanvasGradient`.

Examples
--------

### Filling a rectangle with a conic gradient

This example initializes a conic gradient using the `createConicGradient()` method. Five color stops between around the center coordinate are then created. Finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle.

#### HTML


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


#### JavaScript


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

// Create a conic gradient
// The start angle is 0
// The center position is 100, 100
const gradient = ctx.createConicGradient(0, 100, 100);

// Add five color stops
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);
```


#### Rectangle result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-createconicgradient-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`
* `CanvasGradient`
* `CanvasRenderingContext2D.createLinearGradient()`
* `CanvasRenderingContext2D.createRadialGradient()`
CanvasRenderingContext2D: canvas property
=========================================

 The **`CanvasRenderingContext2D.canvas`** property, part of the
 Canvas API, is a read-only reference to the
 `HTMLCanvasElement` object that is associated with a given context. It
 might be `null` if there is no associated `<canvas>` element.

Value
-----

A `HTMLCanvasElement` object.

Examples
--------

Given this `<canvas>` element:


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


 … you can get a reference to the canvas element within the
 `CanvasRenderingContext2D` by using the `canvas` property:


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

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

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

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

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

See also
--------

* `CanvasRenderingContext2D` interface
* Canvas API
CanvasRenderingContext2D: strokeRect() method
=============================================

 The
 **`CanvasRenderingContext2D.strokeRect()`**
 method of the Canvas 2D API draws a rectangle that is stroked (outlined) according to
 the current `strokeStyle` and other
 context settings.

 This method draws directly to the canvas without modifying the current path, so any
 subsequent `fill()` or
 `stroke()` calls will have no effect
 on it.

Syntax
------


```js
strokeRect(x, y, width, height)
```


 The `strokeRect()` method draws a stroked rectangle whose starting point is
 at `(x, y)` and whose size is specified by `width` and
 `height`.

### Parameters

`x`

The x-axis coordinate of the rectangle's starting point.

`y`

The y-axis coordinate of the rectangle's starting point.

`width`

The rectangle's width. Positive values are to the right, and negative to the left.

`height`

The rectangle's height. Positive values are down, and negative are up.

### Return value

None (`undefined`).

Examples
--------

### A simple stroked rectangle

 This example draws a rectangle with a green outline using the `strokeRect()`
 method.

#### HTML


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


#### JavaScript

 The rectangle's top-left corner is at (20, 10). It has a width of 160 and a height of
 100.


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);
```


#### Result

### Applying various context settings

This example draws a rectangle with a drop shadow and thick, beveled outlines.

#### HTML


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


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "#d53";
ctx.shadowBlur = 20;
ctx.lineJoin = "bevel";
ctx.lineWidth = 15;
ctx.strokeStyle = "#38f";
ctx.strokeRect(30, 30, 160, 90);
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-strokerect-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`
* `CanvasRenderingContext2D.strokeStyle`
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.fillRect()`
CanvasRenderingContext2D: clearRect() method
============================================

 The
 **`CanvasRenderingContext2D.clearRect()`**
 method of the Canvas 2D API erases the pixels in a rectangular area by setting them to
 transparent black.


**Note:** Be aware that `clearRect()` may cause unintended
 side effects if you're not using paths properly. Make sure to call
 `beginPath()` before starting to
 draw new items after calling `clearRect()`.


Syntax
------


```js
clearRect(x, y, width, height)
```


 The `clearRect()` method sets the pixels in a rectangular area to
 transparent black (`rgb(0 0 0 / 0%)`). The rectangle's top-left corner is at
 `(x, y)`, and its size is specified by `width` and
 `height`.

### Parameters

`x`

The x-axis coordinate of the rectangle's starting point.

`y`

The y-axis coordinate of the rectangle's starting point.

`width`

The rectangle's width. Positive values are to the right, and negative to the left.

`height`

The rectangle's height. Positive values are down, and negative are up.

### Return value

None (`undefined`).

Examples
--------

### Erasing the whole canvas

 This code snippet erases the entire canvas. This is commonly required at the start of
 each frame in an animation. The dimensions of the cleared area are set to equal the
 `<canvas>` element's `width` and `height`
 attributes.


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
```

### Erasing part of a canvas

 This example draws a blue triangle on top of a yellowish background. The
 `clearRect()` method then erases part of the canvas.

#### HTML


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


#### JavaScript

 The cleared area is rectangular in shape, with its top-left corner at (10, 10). The
 cleared area has a width of 120 and a height of 100.


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

// Draw yellow background
ctx.beginPath();
ctx.fillStyle = "#ff6";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw blue triangle
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();

// Clear part of the canvas
ctx.clearRect(10, 10, 120, 100);
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-clearrect-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`
* `CanvasRenderingContext2D.fillRect()`
* `CanvasRenderingContext2D.strokeRect()`