recursal/MDN huggingface dataset:
CanvasRenderingContext2D: scrollPathIntoView() method
=====================================================

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

 The
 **`CanvasRenderingContext2D.scrollPathIntoView()`**
 method of the Canvas 2D API scrolls the current or given path into view. It is similar
 to `Element.scrollIntoView()`.

Syntax
------


```js
scrollPathIntoView()
scrollPathIntoView(path)
```

### Parameters

`path`

A `Path2D` path to use.

### Return value

None (`undefined`).

Examples
--------

### Using the scrollPathIntoView method

This example demonstrates the `scrollPathIntoView()` method.

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.fillRect(10, 10, 30, 30);
ctx.scrollPathIntoView();
```


#### Editable demo

Edit the code below to see your changes update live in the canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas">
  <input id="button" type="range" min="1" max="12" />
</canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.rect(10, 10, 30, 30);
ctx.fill();
if (ctx.scrollPathIntoView) {
  ctx.scrollPathIntoView();
} else {
  ctx.fillText("Your browser does not support 'scrollPathIntoView()'.", 0, 150);
}
</textarea>
```


```
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", () => {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-scrollpathintoview-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`
* `Element.scrollIntoView()`
CanvasRenderingContext2D: shadowOffsetY property
================================================

 The
 **`CanvasRenderingContext2D.shadowOffsetY`**
 property of the Canvas 2D API specifies the distance that shadows will be offset
 vertically.


**Note:** Shadows are only drawn if the
 `shadowColor` property is set to
 a non-transparent value. One of the `shadowBlur`,
 `shadowOffsetX`, or `shadowOffsetY` properties must be non-zero, as
 well.


Value
-----

A float specifying the distance that shadows will be offset vertically. Positive values are down, and negative are up. The default value is `0` (no vertical offset). `Infinity` and `NaN` values are ignored.

Examples
--------

### Moving a shadow vertically

 This example adds a blurred shadow to a rectangle. The
 `shadowColor` property sets its
 color, `shadowOffsetY` sets its offset 25 units towards the bottom, and
 `shadowBlur` gives it a blur level
 of 10.

#### HTML


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


#### JavaScript


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

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;

// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-shadowoffsety-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.shadowOffsetX`
* `CanvasRenderingContext2D.shadowColor`
* `CanvasRenderingContext2D.shadowBlur`
CanvasRenderingContext2D: lineTo() method
=========================================

 The `CanvasRenderingContext2D` method
 **`lineTo()`**, part of the Canvas 2D API, adds a straight line
 to the current sub-path by connecting the sub-path's last point to the specified
 `(x, y)` coordinates.

 Like other methods that modify the current path, this method does not directly render
 anything. To draw the path onto a canvas, you can use the
 `fill()` or
 `stroke()` methods.

Syntax
------


```js
lineTo(x, y)
```

### Parameters

`x`

The x-axis coordinate of the line's end point.

`y`

The y-axis coordinate of the line's end point.

### Return value

None (`undefined`).

Examples
--------

### Drawing a straight line

This example draws a straight line using the `lineTo()` method.

#### HTML


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


#### JavaScript

The line begins at (30, 50) and ends at (150, 100).


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

ctx.beginPath(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path
```


#### Result

### Drawing connected lines

 Each call of `lineTo()` (and similar methods) automatically adds to the
 current sub-path, which means that all the lines will all be stroked or filled together.
 This example draws a letter 'M' with a single contiguous line.

#### HTML


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


#### JavaScript


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

ctx.moveTo(90, 130);
ctx.lineTo(95, 25);
ctx.lineTo(150, 80);
ctx.lineTo(205, 25);
ctx.lineTo(210, 130);
ctx.lineWidth = 15;
ctx.stroke();
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-lineto-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.moveTo()`
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D: textBaseline property
===============================================

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

Value
-----

Possible values:

`"top"`

The text baseline is the top of the em square.

`"hanging"`

 The text baseline is the hanging baseline. (Used by Tibetan and other Indic
 scripts.)


`"middle"`

The text baseline is the middle of the em square.

`"alphabetic"`

The text baseline is the normal alphabetic baseline. Default value.

`"ideographic"`

 The text baseline is the ideographic baseline; this is the bottom of the body of the
 characters, if the main body of characters protrudes beneath the alphabetic baseline.
 (Used by Chinese, Japanese, and Korean scripts.)


`"bottom"`

 The text baseline is the bottom of the bounding box. This differs from the
 ideographic baseline in that the ideographic baseline doesn't consider descenders.


The default value is `"alphabetic"`.

Examples
--------

### Comparison of property values

This example demonstrates the various `textBaseline` property values.

#### HTML


```html
<canvas id="canvas" width="550" height="500"></canvas>
```


#### JavaScript


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

const baselines = [
  "top",
  "hanging",
  "middle",
  "alphabetic",
  "ideographic",
  "bottom",
];
ctx.font = "36px serif";
ctx.strokeStyle = "red";

baselines.forEach((baseline, index) => {
  ctx.textBaseline = baseline;
  const y = 75 + index \* 75;
  ctx.beginPath();
  ctx.moveTo(0, y + 0.5);
  ctx.lineTo(550, y + 0.5);
  ctx.stroke();
  ctx.fillText(`Abcdefghijklmnop (${baseline})`, 0, y);
});
```


#### Result

### Comparison of property values on the same line

As with the previous example, this example demonstrates the various `textBaseline` property values, but in this case with all of them lined up horizontally along the same line — to make it easier to see how they differ from each other.

#### HTML


```html
<canvas id="canvas" width="724" height="160"></canvas>
```


#### JavaScript


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

const baselines = [
  "top",
  "hanging",
  "middle",
  "alphabetic",
  "ideographic",
  "bottom",
];
ctx.font = "20px serif";
ctx.strokeStyle = "red";

ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(840, 100);
ctx.moveTo(0, 55);
ctx.stroke();

baselines.forEach((baseline, index) => {
  ctx.save();
  ctx.textBaseline = baseline;
  let x = index \* 120 + 10;
  ctx.fillText("Abcdefghijk", x, 100);
  ctx.restore();
  ctx.fillText(baseline, x + 5, 50);
});
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-textbaseline-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: fontVariantCaps property
==================================================

The **`CanvasRenderingContext2D.fontVariantCaps`** property of the Canvas API specifies an alternative capitalization of the rendered text.

This corresponds to the CSS `font-variant-caps` property.

Value
-----

The font alternative capitalization value, which is one of:

`normal` (default)

Deactivates of the use of alternate glyphs.

`small-caps`

 Enables display of small capitals (OpenType feature: `smcp`).
 Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.


`all-small-caps`

Enables display of small capitals for both upper and lowercase letters (OpenType features: `c2sc`, `smcp`).

`petite-caps`

Enables display of petite capitals (OpenType feature: `pcap`).

`all-petite-caps`

Enables display of petite capitals for both upper and lowercase letters (OpenType features: `c2pc`, `pcap`).

`unicase`

Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: `unic`).

`titling-caps`

 Enables display of titling capitals (OpenType feature: `titl`).
 Uppercase letter glyphs are often designed for use with lowercase letters.
 When used in all uppercase titling sequences they can appear too strong.
 Titling capitals are designed specifically for this situation.


The property can be used to get or set the font capitalization value.

Note that there are accessibility concerns with some of these, which are outlined in the corresponding `font-variant-caps` topic.

Examples
--------

 In this example we display the text "Hello World" using each of the supported values of the `fontVariantCaps` property.
 The value is also displayed for each case by reading the property.

### HTML


```html
<canvas id="canvas" width="700" height="220"></canvas>
```

### JavaScript


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

// Default (normal)
ctx.fillText(`Hello world (default: ${ctx.fontVariantCaps})`, 5, 20);

// Capitalization: small-caps
ctx.fontVariantCaps = "small-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 50);

// Capitalization: all-small-caps
ctx.fontVariantCaps = "all-small-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 80);

// Capitalization: petite-caps
ctx.fontVariantCaps = "petite-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 110);

// Capitalization: all-petite-caps
ctx.fontVariantCaps = "all-petite-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 140);

// Capitalization: unicase
ctx.fontVariantCaps = "unicase";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 170);

// Capitalization: titling-caps
ctx.fontVariantCaps = "titling-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 200);
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-fontvariantcaps |

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

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

 The
 **`CanvasRenderingContext2D.createLinearGradient()`**
 method of the Canvas 2D API creates a gradient along the line connecting two given
 coordinates.

![The gradient transitions colors along the gradient line, starting at point x0, y0 and going to x1, y1, even if those points extend the gradient line beyond the edges of the element on which the gradient is drawn.](/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient/mdn-canvas-lineargradient.png)

 This method returns a linear `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
createLinearGradient(x0, y0, x1, y1)
```


 The `createLinearGradient()` method is specified by four parameters defining
 the start and end points of the gradient line.

### Parameters

`x0`

The x-axis coordinate of the start point.

`y0`

The y-axis coordinate of the start point.

`x1`

The x-axis coordinate of the end point.

`y1`

The y-axis coordinate of the end point.

### Return value

A linear `CanvasGradient` initialized with the specified line.

### Exceptions

`NotSupportedError` `DOMException`

Thrown when non-finite values are passed as parameters.

Examples
--------

### Filling a rectangle with a linear gradient

 This example initializes a linear gradient using the
 `createLinearGradient()` method. Three color stops between the gradient's
 start and end points are then created. Finally, the gradient is assigned to the canvas
 context, and is rendered to a filled rectangle.

#### HTML


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


#### JavaScript


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

// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
const gradient = ctx.createLinearGradient(20, 0, 220, 0);

// Add three color stops
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");

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


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-createlineargradient-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.createRadialGradient()`
* `CanvasRenderingContext2D.createConicGradient()`
CanvasRenderingContext2D: arc() method
======================================

 The
 **`CanvasRenderingContext2D.arc()`**
 method of the Canvas 2D API adds a circular arc to the current sub-path.

Syntax
------


```js
arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)
```


 The `arc()` method creates a circular arc centered at `(x, y)`
 with a radius of `radius`. The path starts at `startAngle`, ends
 at `endAngle`, and travels in the direction given by
 `counterclockwise` (defaulting to clockwise).

### Parameters

`x`

The horizontal coordinate of the arc's center.

`y`

The vertical coordinate of the arc's center.

`radius`

The arc's radius. Must be positive.

`startAngle`

The angle at which the arc starts in radians, measured from the positive x-axis.

`endAngle`

The angle at which the arc ends in radians, measured from the positive x-axis.

`counterclockwise` Optional

 An optional boolean value. If `true`, draws the arc
 counter-clockwise between the start and end angles. The default is `false`
 (clockwise).


### Return value

None (`undefined`).

Examples
--------

### Drawing a full circle

This example draws a complete circle with the `arc()` method.

#### HTML


```html
<canvas></canvas>
```


#### JavaScript

 The arc is given an x-coordinate of 100, a y-coordinate of 75, and a radius of 50. To
 make a full circle, the arc begins at an angle of 0 radians (0**°**), and
 ends at an angle of 2π radians (360**°**).


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

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 \* Math.PI);
ctx.stroke();
```


#### Result

### Different shapes demonstrated

This example draws various shapes to show what is possible with `arc()`.
```

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



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

// Draw shapes
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 2; j++) {
    ctx.beginPath();
    let x = 25 + j \* 50; // x coordinate
    let y = 25 + i \* 50; // y coordinate
    let radius = 20; // Arc radius
    let startAngle = 0; // Starting point on circle
    let endAngle = Math.PI + (Math.PI \* j) / 2; // End point on circle
    let counterclockwise = i % 2 === 1; // Draw counterclockwise

    ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}
```


#### Result

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

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-arc-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`
* Use `CanvasRenderingContext2D.ellipse()` to draw an elliptical arc.
CanvasRenderingContext2D: isContextLost() method
================================================

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 **`CanvasRenderingContext2D.isContextLost()`** method of the Canvas 2D API returns `true` if the rendering context is lost (and has not yet been reset).
 This might occur due to driver crashes, running out of memory, and so on.

 If the user agent detects that the canvas backing storage is lost it will fire the `contextlost` event at the associated `HTMLCanvasElement`.
 If this event is not cancelled it will attempt to reset the backing storage to the default state (this is equivalent to calling `CanvasRenderingContext2D.reset()`).
 On success it will fire the `contextrestored` event, indicating that the context is ready to reinitialize and redraw.

Syntax
------


```js
isContextLost()
```

### Parameters

None.

### Return value

`true` if the rendering context was lost; `false` otherwise.

### Examples


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

if (ctx.isContextLost()) {
  console.log("Context is lost");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-iscontextlost |

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`
* `HTMLCanvasElement: contextlost` event
* `HTMLCanvasElement: contextrestored` event
CanvasRenderingContext2D: quadraticCurveTo() method
===================================================

 The
 **`CanvasRenderingContext2D.quadraticCurveTo()`**
 method of the Canvas 2D API adds a quadratic Bézier curve to the current
 sub-path. It requires two points: the first one is a control point and the second one is
 the end point. The starting point is the latest point in the current path, which can be
 changed using `moveTo()` before creating
 the quadratic Bézier curve.

Syntax
------


```js
quadraticCurveTo(cpx, cpy, x, y)
```

### Parameters

`cpx`

The x-axis coordinate of the control point.

`cpy`

The y-axis coordinate of the control point.

`x`

The x-axis coordinate of the end point.

`y`

The y-axis coordinate of the end point.

### Return value

None (`undefined`).

Examples
--------

### How quadraticCurveTo works

This example shows how a quadratic Bézier curve is drawn.

#### HTML


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


#### JavaScript


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

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 \* Math.PI); // Start point
ctx.arc(50, 100, 5, 0, 2 \* Math.PI); // End point
ctx.fill();

// Control point
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 \* Math.PI);
ctx.fill();
```


#### Result

 In this example, the control point is red and the
 start and end points are blue.

### A simple quadratic curve

 This example draws a simple quadratic Bézier curve using
 `quadraticCurveTo()`.

#### HTML


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


#### JavaScript

 The curve begins at the point specified by `moveTo()`: (20, 110). The
 control point is placed at (230, 150). The curve ends at (250, 20).


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

ctx.beginPath();
ctx.moveTo(20, 110);
ctx.quadraticCurveTo(230, 150, 250, 20);
ctx.stroke();
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-quadraticcurveto-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`
* Bézier curve