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

 The
 **`CanvasRenderingContext2D.shadowColor`**
 property of the Canvas 2D API specifies the color of shadows.

 Be aware that the shadow's rendered opacity will be affected by the opacity of the
 `fillStyle` color when filling, and
 of the `strokeStyle` color when
 stroking.


**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 string parsed as a CSS `<color>` value. The default value is fully-transparent black.

Examples
--------

### Adding a shadow to shapes

 This example adds a shadow to two squares; the first one is filled, and the second one
 is stroked. The `shadowColor` property sets the shadows' color, while
 `shadowOffsetX` and `shadowOffsetY` set their position relative to
 the shapes.

#### HTML


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


#### JavaScript


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

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// Filled rectangle
ctx.fillRect(20, 20, 100, 100);

// Stroked rectangle
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);
```


#### Result

### Shadows on translucent shapes

 A shadow's opacity is affected by the transparency level of its parent object (even
 when `shadowColor` specifies a completely opaque value). This example strokes
 and fills a rectangle with translucent colors.

#### HTML


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


#### JavaScript

 The resulting alpha value of the fill shadow is `.8 * .2`, or
 `.16`. The alpha of the stroke shadow is `.8 * .6`, or
 `.48`.


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

// Shadow
ctx.shadowColor = "rgb(255 0 0 / 80%)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;

// Filled rectangle
ctx.fillStyle = "rgb(0 255 0 / 20%)";
ctx.fillRect(10, 10, 150, 100);

// Stroked rectangle
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(0 0 255 / 60%)";
ctx.strokeRect(10, 10, 150, 100);
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-shadowcolor-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, the non-standard and deprecated method
 `ctx.setShadow()` is implemented besides this property.


```js
setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);
```

See also
--------

* The interface defining this property: `CanvasRenderingContext2D`
CanvasRenderingContext2D: letterSpacing property
================================================

The **`CanvasRenderingContext2D.letterSpacing`** property of the Canvas API specifies the spacing between letters when drawing text.

This corresponds to the CSS `letter-spacing` property.

Value
-----

 The letter spacing as a string in the CSS `<length>` data format.
 The default is `0px`.

 The property can be used to get or set the spacing.
 The property value will remain unchanged if set to an invalid/unparsable value.

Examples
--------

 In this example we display the text "Hello World" three times, using the `letterSpacing` property to modify the letter spacing in each case.
 The spacing is also displayed for each case, using the value of the property.

### HTML


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

### JavaScript


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

ctx.font = "30px serif";

// Default letter spacing
ctx.fillText(`Hello world (default: ${ctx.letterSpacing})`, 10, 40);

// Custom letter spacing: 10px
ctx.letterSpacing = "10px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 90);

// Custom letter spacing: 20px
ctx.letterSpacing = "20px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 140);
```

### Result

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

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

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

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

See also
--------

* `CanvasRenderingContext2D.wordSpacing`
CanvasRenderingContext2D: bezierCurveTo() method
================================================

 The
 **`CanvasRenderingContext2D.bezierCurveTo()`**
 method of the Canvas 2D API adds a cubic Bézier curve to the current
 sub-path. It requires three points: the first two are control points and the third 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 Bézier curve.

Syntax
------


```js
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
```

### Parameters

`cp1x`

The x-axis coordinate of the first control point.

`cp1y`

The y-axis coordinate of the first control point.

`cp2x`

The x-axis coordinate of the second control point.

`cp2y`

The y-axis coordinate of the second 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 bezierCurveTo works

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

#### HTML


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


#### JavaScript


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

// Define the points as {x, y}
let start = { x: 50, y: 20 };
let cp1 = { x: 230, y: 30 };
let cp2 = { x: 150, y: 80 };
let end = { x: 250, y: 100 };

// Cubic Bézier curve
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();

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

// Control points
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 \* Math.PI); // Control point one
ctx.arc(cp2.x, cp2.y, 5, 0, 2 \* Math.PI); // Control point two
ctx.fill();
```


#### Result

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

### A simple Bézier curve

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

#### HTML


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


#### JavaScript

 The curve begins at the point specified by `moveTo()`: (30, 30). The first
 control point is placed at (120, 160), and the second at (180, 10). The curve ends at
 (220, 140).


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

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.bezierCurveTo(120, 160, 180, 10, 220, 140);
ctx.stroke();
```


#### Result

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

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

 The
 **`CanvasRenderingContext2D.resetTransform()`**
 method of the Canvas 2D API resets the current transform to the identity matrix.

Syntax
------


```js
resetTransform()
```

Examples
--------

### Resetting the matrix

 This example draws a rotated rectangle after modifying the matrix, and then resets the
 matrix using the `resetTransform()` method.

#### HTML


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


#### JavaScript

 The `rotate()` method rotates the
 transformation matrix by 45°. The `fillRect()` method draws a filled rectangle, adjusted according to that matrix.


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

// Draw a rotated rectangle
ctx.rotate((45 \* Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);

// Reset transformation matrix to the identity matrix
ctx.resetTransform();
```


#### Result

### Continuing with a regular matrix

 Whenever you're done drawing transformed shapes, you should call
 `resetTransform()` before rendering anything else. In this example, the first
 two shapes are drawn with a skew transformation, and the last two are drawn with the
 identity (regular) transformation.

#### HTML


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


#### JavaScript


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

// Skewed rectangles
ctx.transform(1, 0, 1.7, 1, 0, 0);
ctx.fillStyle = "gray";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

// Non-skewed rectangles
ctx.resetTransform();
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);
```


#### Result

The skewed rectangles are gray, and the non-skewed rectangles are red.

Polyfill
--------

 You can also use the `setTransform()` method to reset the current transform to the identity matrix, like
 so:


```js
ctx.setTransform(1, 0, 0, 1, 0, 0);
```

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

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

 The
 **`CanvasRenderingContext2D.beginPath()`**
 method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call
 this method when you want to create a new path.


**Note:** To create a new sub-path, i.e., one matching the current
 canvas state, you can use `CanvasRenderingContext2D.moveTo()`.


Syntax
------


```js
beginPath()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Creating distinct paths

This example creates two paths, each of which contains a single line.

#### HTML


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


#### JavaScript

 The `beginPath()` method is called before beginning each line, so that they
 may be drawn with different colors.


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

// First path
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-beginpath-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.closePath()`
CanvasRenderingContext2D: transform() method
============================================

 The
 **`CanvasRenderingContext2D.transform()`**
 method of the Canvas 2D API multiplies the current transformation with the matrix
 described by the arguments of this method. This lets you scale, rotate, translate
 (move), and skew the context.


**Note:** See also the
 `setTransform()` method, which
 resets the current transform to the identity matrix and then invokes
 `transform()`.


Syntax
------


```js
transform(a, b, c, d, e, f)
```


The transformation matrix is described by: 


[

a

c

e

b

d

f

0

0

1

]

 \left[ \begin{array}{ccc} a & c & e \ b & d
 & f \ 0 & 0 & 1 \end{array} \right]


### Parameters

`a` (`m11`)

The cell in the first row and first column of the matrix.

`b` (`m12`)

The cell in the second row and first column of the matrix.

`c` (`m21`)

The cell in the first row and second column of the matrix.

`d` (`m22`)

The cell in the second row and second column of the matrix.

`e` (`m41`)

The cell in the first row and third column of the matrix.

`f` (`m42`)

The cell in the second row and third column of the matrix.

If a point originally had coordinates 


(
x
,
y
)

(x, y)

, then after the transformation it will have coordinates 


(
a
x
+
c
y
+
e
,
b
x
+
d
y
+
f
)

(ax + cy + e, bx + dy + f)

. This means:

* `e` and `f` control the horizontal and vertical translation of the context.
* When `b` and `c` are `0`, `a` and `d` control the horizontal and vertical scaling of the context.
* When `a` and `d` are `1`, `b` and `c` control the horizontal and vertical skewing of the context.
### Return value

None (`undefined`).

Examples
--------

### Skewing a shape

 This example skews a rectangle both vertically (`.2`) and horizontally
 (`.8`). Scaling and translation remain unchanged.

#### HTML


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


#### JavaScript


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

ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-transform-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.setTransform()`
CanvasRenderingContext2D: save() method
=======================================

 The
 **`CanvasRenderingContext2D.save()`**
 method of the Canvas 2D API saves the entire state of the canvas by pushing the current
 state onto a stack.

### The drawing state

The drawing state that gets saved onto a stack consists of:

* The current transformation matrix.
* The current clipping region.
* The current dash list.
* The current values of the following attributes:
 `strokeStyle`,
 `fillStyle`,
 `globalAlpha`,
 `lineWidth`,
 `lineCap`,
 `lineJoin`,
 `miterLimit`,
 `lineDashOffset`,
 `shadowOffsetX`,
 `shadowOffsetY`,
 `shadowBlur`,
 `shadowColor`,
 `globalCompositeOperation`, `font`,
 `textAlign`,
 `textBaseline`,
 `direction`,
 `imageSmoothingEnabled`.
Syntax
------


```js
save()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Saving the drawing state

 This example uses the `save()` method to save the current state and
 `restore()` to restore it later, so that you are able to draw a rect with the
 current state later.

#### HTML


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


#### JavaScript


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

// Save the current state
ctx.save();

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

// Restore to the state saved by the most recent call to save()
ctx.restore();

ctx.fillRect(150, 40, 100, 100);
```


#### Result

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

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

 The
 **`CanvasRenderingContext2D.fillRect()`**
 method of the Canvas 2D API draws a rectangle that is filled according to the current
 `fillStyle`.

 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
fillRect(x, y, width, height)
```


 The `fillRect()` method draws a filled rectangle whose starting point is at
 `(x, y)` and whose size is specified by `width` and
 `height`. The fill style is determined by the current `fillStyle`
 attribute.

### 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 filled rectangle

This example draws a filled green rectangle using the `fillRect()` method.

#### HTML


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


#### JavaScript

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


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);
```


#### Result

### Filling the whole canvas

 This code snippet fills the entire canvas with a rectangle. This is often useful for
 creating a background, on top of which other things may then be drawn. To achieve this,
 the dimensions of the rectangle are set to equal the `<canvas>` element's
 `width` and `height` attributes.


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

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-fillrect-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.fillStyle`
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.strokeRect()`
CanvasRenderingContext2D: wordSpacing property
==============================================

The **`CanvasRenderingContext2D.wordSpacing`** property of the Canvas API specifies the spacing between words when drawing text.

This corresponds to the CSS `word-spacing` property.

Value
-----

 The word spacing as a string in the CSS `<length>` data format.
 The default is `0px`.

 The property can be used to get or set the spacing.
 The property value will remain unchanged if set to an invalid/unparsable value.

Examples
--------

 In this example we display the text "Hello World" three times, using the `wordSpacing` property to modify the spacing in each case.
 The spacing is also displayed for each case, using the value of the property.

### HTML


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

### JavaScript


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

ctx.font = "30px serif";

// Default word spacing
ctx.fillText(`Hello world (default: ${ctx.wordSpacing})`, 10, 40);

// Custom word spacing: 10px
ctx.wordSpacing = "10px";
ctx.fillText(`Hello world (${ctx.wordSpacing})`, 10, 90);

// Custom word spacing: 30px
ctx.wordSpacing = "30px";
ctx.fillText(`Hello world (${ctx.wordSpacing})`, 10, 140);
```

### Result

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

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

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

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

See also
--------

* `CanvasRenderingContext2D.letterSpacing`
CanvasRenderingContext2D: shadowBlur property
=============================================

 The
 **`CanvasRenderingContext2D.shadowBlur`**
 property of the Canvas 2D API specifies the amount of blur applied to shadows. The
 default is `0` (no blur).


**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 non-negative float specifying the level of shadow blur, where `0` represents no blur and larger numbers represent increasingly more blur. This value doesn't correspond to a number of pixels, and is not affected by the current transformation matrix. The default value is `0`. Negative, `Infinity`, and `NaN` values are ignored.

Examples
--------

### Adding a shadow to a shape

 This example adds a blurred shadow to a rectangle. The `shadowColor`
 property sets its color, and `shadowBlur` sets its level of blurriness.

#### HTML


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


#### JavaScript


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

// Shadow
ctx.shadowColor = "red";
ctx.shadowBlur = 15;

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


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-shadowblur-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, the non-standard and deprecated method
 `ctx.setShadow()` is implemented besides this property.


```js
setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);
```

See also
--------

* The interface defining this property: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.shadowColor`
CanvasRenderingContext2D: lineWidth property
============================================

 The
 **`CanvasRenderingContext2D.lineWidth`**
 property of the Canvas 2D API sets the thickness of lines.


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


Value
-----

A number specifying the line width, in coordinate space units. Zero, negative, `Infinity`, and `NaN` values are ignored. This value is `1.0` by default.

Examples
--------

### Changing line width

This example draws a line and a rectangle, using a line width of 15 units.

#### HTML


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


#### JavaScript


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

ctx.lineWidth = 15;

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();
```


#### Result

### More examples

For more examples and explanation about this property, see Applying styles and color in the Canvas Tutorial.

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-linewidth-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`
* Applying styles and color