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

 The **`CanvasRenderingContext2D.miterLimit`** property of the
 Canvas 2D API sets the miter limit ratio.

**Note:** For more info about miters, see Applying styles and color in the Canvas tutorial.

Value
-----

A number specifying the miter limit ratio, in coordinate space units. Zero, negative, `Infinity`, and `NaN` values are ignored. The default value is `10.0`.

Examples
--------

### Using the `miterLimit` property

See the chapter Applying styles and color in the Canvas tutorial for more information.

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-miterlimit-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.lineCap`
* `CanvasRenderingContext2D.lineJoin`
CanvasRenderingContext2D: shadowOffsetX property
================================================

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


**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 horizontally. Positive values are to the right, and negative to the left. The default value is `0` (no horizontal offset). `Infinity` and `NaN` values are ignored.

Examples
--------

### Moving a shadow horizontally

 This example adds a blurred shadow to a rectangle. The
 `shadowColor` property sets its
 color, `shadowOffsetX` sets its offset 25 units to the right, 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.shadowOffsetX = 25;
ctx.shadowBlur = 10;

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


#### Result

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

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

 The **`getLineDash()`** method of the Canvas 2D API's
 `CanvasRenderingContext2D` interface gets the current line dash pattern.

Syntax
------


```js
getLineDash()
```

### Parameters

None.

### Return value

 An `Array` of numbers that specify distances to alternately draw a line and
 a gap (in coordinate space units). If the number, when setting the elements, is odd, the
 elements of the array get copied and concatenated. For example, setting the line dash to
 `[5, 15, 25]` will result in getting back
 `[5, 15, 25, 5, 15, 25]`.

Examples
--------

### Getting the current line dash setting

This example demonstrates the `getLineDash()` method.

#### HTML


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


#### JavaScript

 As set by `setLineDash()`,
 strokes consist of lines that are 10 units wide, with spaces of 20 units in between each
 line.


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

ctx.setLineDash([10, 20]);
console.log(ctx.getLineDash()); // [10, 20]

// Draw a dashed line
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-getlinedash-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.setLineDash()`
* `CanvasRenderingContext2D.lineDashOffset`
CanvasRenderingContext2D: rotate() method
=========================================

 The
 **`CanvasRenderingContext2D.rotate()`**
 method of the Canvas 2D API adds a rotation to the transformation matrix.

Syntax
------


```js
rotate(angle)
```


![Rectangular coordinate system with the rotation of the abscissa axis by the alpha angle](/en-US/docs/Web/API/CanvasRenderingContext2D/rotate/canvas_grid_rotate.png)

### Parameters

`angle`

 The rotation angle, clockwise in radians. You can use
 `degree * Math.PI / 180` to calculate a radian from a degree.



 The rotation center point is always the canvas origin. To change the center point, you
 will need to move the canvas by using the
 `translate()` method.

### Return value

None (`undefined`).

Examples
--------

### Rotating a shape

 This example rotates a rectangle by 45°. Note that the center of rotation is the
 top-left corner of the canvas, and not a location relative to any shape.

#### HTML


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


#### JavaScript


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

// Point of transform origin
ctx.arc(0, 0, 5, 0, 2 \* Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(100, 0, 80, 20);

// Rotated rectangle
ctx.rotate((45 \* Math.PI) / 180);
ctx.fillStyle = "red";
ctx.fillRect(100, 0, 80, 20);

// Reset transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
```


#### Result

The center of rotation is blue. The non-rotated rectangle is gray, and the rotated rectangle is red.

### Rotating a shape around its center

 This example rotates a shape around its center point. To do this, the following steps
 are applied to the matrix:

1. First, `translate()` moves the
 matrix's origin to the shape's center.
2. `rotate()` rotates the matrix by the desired amount.
3. Finally, `translate()` moves the matrix's origin back to its starting
 point. This is done by applying the values of the shape's center coordinates in a
 negative direction.

#### HTML


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


#### JavaScript

 The shape is a rectangle with its corner at (80, 60), a width of 140, a height of 30.
 Its horizontal center is at (80 + 140 / 2), or 150. Its vertical center is at (60 + 30 /
 2), or 75. Thus, the center point is at (150, 75).


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

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(80, 60, 140, 30);

// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

// Rotated rectangle
ctx.fillStyle = "red";
ctx.fillRect(80, 60, 140, 30);
```


#### Result

The non-rotated rectangle is gray, and the rotated rectangle is red.

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

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

 The
 **`CanvasRenderingContext2D.direction`**
 property of the Canvas 2D API specifies the current text direction used to draw text.

Value
-----

Possible values:

`"ltr"`

The text direction is left-to-right.

`"rtl"`

The text direction is right-to-left.

`"inherit"`

 The text direction is inherited from the `<canvas>` element or the
 `Document` as appropriate. Default value.


The default value is `"inherit"`.

Examples
--------

### Changing text direction

 This example draws two pieces of text. The first one is left-to-right, and the second
 is right-to-left. Note that "Hi!" in `ltr` becomes "!Hi" in `rtl`.

#### HTML


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


#### JavaScript


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

ctx.font = "48px serif";
ctx.fillText("Hi!", 150, 50);
ctx.direction = "rtl";
ctx.fillText("Hi!", 150, 130);
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-direction-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: createRadialGradient() method
=======================================================

 The
 **`CanvasRenderingContext2D.createRadialGradient()`**
 method of the Canvas 2D API creates a radial gradient using the size and coordinates of
 two circles.

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


 The `createRadialGradient()` method is specified by six parameters, three
 defining the gradient's start circle, and three defining the end circle.

### Parameters

`x0`

The x-axis coordinate of the start circle.

`y0`

The y-axis coordinate of the start circle.

`r0`

The radius of the start circle. Must be non-negative and finite.

`x1`

The x-axis coordinate of the end circle.

`y1`

The y-axis coordinate of the end circle.

`r1`

The radius of the end circle. Must be non-negative and finite.

### Return value

A radial `CanvasGradient` initialized with the two specified circles.

### Exceptions

`NotSupportedError` `DOMException`

Thrown when non-finite values are passed in parameter.

`IndexSizeError` `DOMException`

Thrown when a negative radius is passed in parameter.

Examples
--------

### Filling a rectangle with a radial gradient

 This example initializes a radial gradient using the
 `createRadialGradient()` method. Three color stops between the gradient's two
 circles 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="200" height="200"></canvas>
```


#### JavaScript


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

// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// Add three color stops
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

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


#### Result

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

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

 The
 **`CanvasRenderingContext2D.isPointInStroke()`**
 method of the Canvas 2D API reports whether or not the specified point is inside the
 area contained by the stroking of a path.

Syntax
------


```js
isPointInStroke(x, y)
isPointInStroke(path, x, y)
```

### Parameters

`x`

The x-axis coordinate of the point to check.

`y`

The y-axis coordinate of the point to check.

`path`

 A `Path2D` path to check against. If unspecified, the current path is
 used.


### Return value

A boolean value

 A Boolean, which is `true` if the point is inside the area contained by
 the stroking of a path, otherwise `false`.


Examples
--------

### Checking a point in the current path

 This example uses the `isPointInStroke()` method to check if a point is
 within the area of the current path's stroke.

#### HTML


```html
<canvas id="canvas"></canvas>
<p>In stroke: <code id="result">false</code></p>
```


#### JavaScript


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

ctx.rect(10, 10, 100, 100);
ctx.stroke();
result.innerText = ctx.isPointInStroke(50, 10);
```


#### Result

### Checking a point in the specified path

 Whenever you move the mouse, this example checks whether the cursor is in the stroke of
 an elliptical `Path2D` path. If yes, the ellipse's stroke becomes green,
 otherwise it is red.

#### HTML


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


#### JavaScript


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

// Create ellipse
const ellipse = new Path2D();
ellipse.ellipse(150, 75, 40, 60, Math.PI \* 0.25, 0, 2 \* Math.PI);
ctx.lineWidth = 25;
ctx.strokeStyle = "red";
ctx.fill(ellipse);
ctx.stroke(ellipse);

// Listen for mouse moves
canvas.addEventListener("mousemove", (event) => {
  // Check whether point is inside ellipse's stroke
  const isPointInStroke = ctx.isPointInStroke(
    ellipse,
    event.offsetX,
    event.offsetY,
  );
  ctx.strokeStyle = isPointInStroke ? "green" : "red";

  // Draw ellipse
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fill(ellipse);
  ctx.stroke(ellipse);
});
```


#### Result

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

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

 The
 **`CanvasRenderingContext2D.globalAlpha`**
 property of the Canvas 2D API specifies the alpha (transparency) value that is applied
 to shapes and images before they are drawn onto the canvas.

**Note:** See also the chapter Applying styles and color in the Canvas Tutorial.

Value
-----

A number between `0.0` (fully transparent) and `1.0` (fully opaque), inclusive. The default value is `1.0`. Values outside that range, including `Infinity` and `NaN`, will not be set, and `globalAlpha` will retain its previous value.

Examples
--------

### Drawing translucent shapes

 This example uses the `globalAlpha` property to draw two semi-transparent
 rectangles.

#### HTML


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


#### JavaScript


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

ctx.globalAlpha = 0.5;

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
```


#### Result

### Overlaying transparent shapes

 This example illustrates the effect of overlaying multiple transparent shapes on top of
 each other. We begin by drawing a solid background composed of four differently colored
 squares. Next, we set the `globalAlpha` property to `0.2` (20%
 opaque); this alpha level will apply to all of our transparent shapes. After that, we
 use a `for` loop to draw a series of circles with increasing radii.

 With each new circle, the opacity of the previous circles underneath is effectively
 increased. If we were to increase the step count (and thus draw more circles), the
 background would eventually disappear completely from the center of the image.
```

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



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

// Draw background
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";

// Set transparency value
ctx.globalAlpha = 0.2;

// Draw transparent circles
for (let i = 0; i < 7; i++) {
  ctx.beginPath();
  ctx.arc(75, 75, 10 + 10 \* i, 0, Math.PI \* 2, true);
  ctx.fill();
}
```


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

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

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

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

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

### Gecko-specific notes

* Starting with Gecko 5.0, specifying invalid values for `globalAlpha` no
 longer throws a `SYNTAX_ERR` exception; these are now correctly silently
 ignored.
### WebKit/Blink-specific notes

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

* The interface defining this property: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.globalCompositeOperation`
CanvasRenderingContext2D: imageSmoothingQuality property
========================================================

 The **`imageSmoothingQuality`** property of the
 `CanvasRenderingContext2D` interface, part of the Canvas API, lets you set the quality of
 image smoothing.


**Note:** For this property to have an effect,
 `imageSmoothingEnabled`
 must be `true`.


Value
-----

One of the following:

`"low"`

Low quality.

`"medium"`

Medium quality.

`"high"`

High quality.

The default value is `"low"`.

Examples
--------

### Setting image smoothing quality

This example uses the `imageSmoothingQuality` property with a scaled image.

#### HTML


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


#### JavaScript


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

let img = new Image();
img.src = "canvas\_createpattern.png";
img.onload = () => {
  ctx.imageSmoothingQuality = "low";
  ctx.drawImage(img, 0, 0, 300, 150);
};
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-imagesmoothingquality-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.imageSmoothingEnabled`
* `image-rendering`
CanvasRenderingContext2D: measureText() method
==============================================

 The
 `CanvasRenderingContext2D.measureText()`
 method returns a `TextMetrics` object that contains information about the
 measured text (such as its width, for example).

Syntax
------


```js
measureText(text)
```

### Parameters

`text`

The text string to measure.

### Return value

A `TextMetrics` object.

Examples
--------

Given this `<canvas>` element:


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


… you can get a `TextMetrics` object using the following code:


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

let text = ctx.measureText("Hello world");
console.log(text.width); // 56;
```

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-measuretext-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`
* `TextMetrics`
CanvasRenderingContext2D: font property
=======================================

 The **`CanvasRenderingContext2D.font`** property of the Canvas 2D API specifies the current text style to use when drawing text.
 This string uses the same syntax as the CSS font specifier.

Value
-----

A string parsed as CSS `font` value. The default font is 10px sans-serif.

Examples
--------

### Using a custom font

In this example we use the `font` property to specify a custom font weight, size, and family.

#### HTML


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


#### JavaScript


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

ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);
```


#### Result

### Loading fonts with the CSS Font Loading API

With the help of the `FontFace` API, you can explicitly load fonts before using them in a canvas.


```js
let f = new FontFace("test", "url(x)");

f.load().then(() => {
  // Ready to use the font in a canvas context
});
```

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

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

The **`CanvasRenderingContext2D.fontKerning`** property of the Canvas API specifies how font kerning information is used.

 Kerning adjusts how adjacent letters are spaced in a proportional font, allowing them to edge into each other's visual area if there is space available.
 For example, in well-kerned fonts, the characters `AV`, `Ta` and `We` nest together and make character spacing more uniform and pleasant to read than the equivalent text without kerning.

The property corresponds to the `font-kerning` CSS property.

Value
-----

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

Allowed values are:

`auto`

 The browser determines whether font kerning should be used or not.
 For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.


`normal`

Font kerning information stored in the font must be applied.

`none`

Font kerning information stored in the font is disabled.

Examples
--------

In this example we display the text "AVA Ta We" using each of the supported values of the `textRendering` property.

### HTML


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

### JavaScript


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

// Default (auto)
ctx.fillText(`AVA Ta We (default: ${ctx.fontKerning})`, 5, 30);

// Font kerning: normal
ctx.fontKerning = "normal";
ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 70);

// Font kerning: none
ctx.fontKerning = "none";
ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 110);
```

### Result

Note that the last string has font kerning disabled, so adjacent characters are evenly spread.

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

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

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

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