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

 The **`imageSmoothingEnabled`** property of the
 `CanvasRenderingContext2D` interface, part of the Canvas API, determines whether scaled images
 are smoothed (`true`, default) or not (`false`). On getting the
 `imageSmoothingEnabled` property, the last value it was set to is returned.

 This property is useful for games and other apps that use pixel art. When enlarging
 images, the default resizing algorithm will blur the pixels. Set this property to
 `false` to retain the pixels' sharpness.


**Note:** You can adjust the smoothing quality with the
 `imageSmoothingQuality`
 property.


Value
-----

A boolean value indicating whether to smooth scaled images or not. The default value is `true`.

Examples
--------

### Disabling image smoothing

 This example compares three images. The first image is drawn at its natural size, the
 second is scaled to 3X and drawn with image smoothing enabled, and the third is scaled
 to 3X but drawn with image smoothing disabled.

#### HTML


```html
<canvas id="canvas" width="460" height="210"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.textAlign = "center";

const img = new Image();
img.src =
  "https://interactive-examples.mdn.mozilla.net/media/examples/star.png";
img.onload = () => {
  const w = img.width,
    h = img.height;

  ctx.fillText("Source", w \* 0.5, 20);
  ctx.drawImage(img, 0, 24, w, h);

  ctx.fillText("Smoothing = TRUE", w \* 2.5, 20);
  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(img, w, 24, w \* 3, h \* 3);

  ctx.fillText("Smoothing = FALSE", w \* 5.5, 20);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, w \* 4, 24, w \* 3, h \* 3);
};
```


#### Result

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

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

 The
 **`CanvasRenderingContext2D.fill()`**
 method of the Canvas 2D API fills the current or given path with the current
 `fillStyle`.

Syntax
------


```js
fill()
fill(path)
fill(fillRule)
fill(path, fillRule)
```

### Parameters

`fillRule`

 The algorithm by which to determine if a point is inside or outside the filling
 region.
 Possible values:


`nonzero`

 The non-zero winding rule.
 Default rule.


`evenodd`

The even-odd winding rule.


`path`

A `Path2D` path to fill.

### Return value

None (`undefined`).

Examples
--------

### Filling a rectangle

This example fills a rectangle with the `fill()` method.

#### HTML


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


#### JavaScript


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


#### Result

### Specifying a path and a fillRule

 This example saves some intersecting lines to a Path2D object. The `fill()`
 method is then used to render the object to the canvas. A hole is left unfilled in the
 object's center by using the `"evenodd"` rule; by default (with the
 `"nonzero"` rule), the hole would also be filled.

#### HTML


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


#### JavaScript


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

// Create path
let region = new Path2D();
region.moveTo(30, 90);
region.lineTo(110, 20);
region.lineTo(240, 130);
region.lineTo(60, 130);
region.lineTo(190, 20);
region.lineTo(270, 90);
region.closePath();

// Fill path
ctx.fillStyle = "green";
ctx.fill(region, "evenodd");
```


#### Result

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

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

 The **`CanvasRenderingContext2D.strokeStyle`** property of the
 Canvas 2D API specifies the color, gradient, or pattern to use for the strokes
 (outlines) around shapes. The default is `#000` (black).

**Note:** For more examples of stroke and fill styles, see Applying styles and color in the Canvas tutorial.

Value
-----

One of the following:

`color`

 A string parsed as CSS
`<color>` value.


`gradient`

A `CanvasGradient` object (a linear or radial gradient).

`pattern`

A `CanvasPattern` object (a repeating image).

Examples
--------

### Changing the stroke color of a shape

This example applies a blue stroke color to a rectangle.

#### HTML


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


#### JavaScript


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

ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);
```


#### Result

### Creating multiple stroke colors using loops

 In this example, we use two `for` loops and the
 `arc()` method to draw a grid of circles,
 each having a different stroke color. To achieve this, we use the two variables
 `i` and `j` to generate a unique RGB color for each circle, and
 only modify the green and blue values. (The red channel has a fixed value.)
```

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



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

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.strokeStyle = `rgb(
 0
 ${Math.floor(255 - 42.5 \* i)}
 ${Math.floor(255 - 42.5 \* j)})`;
    ctx.beginPath();
    ctx.arc(12.5 + j \* 25, 12.5 + i \* 25, 10, 0, Math.PI \* 2, true);
    ctx.stroke();
  }
}
```


The result looks like this:

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

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

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

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

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

### WebKit/Blink-specific note

 In WebKit- and Blink-based browsers, the non-standard and deprecated method
 `ctx.setStrokeColor()` is implemented in addition to this property.


```js
setStrokeColor(color);
setStrokeColor(color, alpha);
setStrokeColor(grayLevel);
setStrokeColor(grayLevel, alpha);
setStrokeColor(r, g, b, a);
setStrokeColor(c, m, y, k, a);
```

See also
--------

* The interface defining this property: `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasPattern`
CanvasRenderingContext2D: textRendering property
================================================

The **`CanvasRenderingContext2D.textRendering`** property of the Canvas API provides information to the rendering engine about what to optimize for when rendering text.

The values correspond to the SVG `text-rendering` attribute (and CSS `text-rendering` property).

Value
-----

 A text-rendering hint to the browser engine.
 This one of:

`auto`

The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.

`optimizeSpeed`

 The browser emphasizes rendering speed over legibility and geometric precision when drawing text.
 It disables kerning and ligatures.


`optimizeLegibility`

 The browser emphasizes legibility over rendering speed and geometric precision.
 This enables kerning and optional ligatures.


`geometricPrecision`

 The browser emphasizes geometric precision over rendering speed and legibility.
 Certain aspects of fonts — such as kerning — don't scale linearly.
 For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect (neither rounded up nor down to the nearest font size supported by the underlying operating system).


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

Examples
--------

 In this example we display the text "Hello World" using each of the supported values of the `textRendering` 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 (auto)
ctx.fillText(`Hello world (default: ${ctx.textRendering})`, 5, 20);

// Text rendering: optimizeSpeed
ctx.textRendering = "optimizeSpeed";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 50);

// Text rendering: optimizeLegibility
ctx.textRendering = "optimizeLegibility";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 80);

// Text rendering: geometricPrecision
ctx.textRendering = "geometricPrecision";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 110);
```

### Result

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

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

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

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

 The
 **`CanvasRenderingContext2D.isPointInPath()`**
 method of the Canvas 2D API reports whether or not the specified point is contained in
 the current path.

Syntax
------


```js
isPointInPath(x, y)
isPointInPath(x, y, fillRule)
isPointInPath(path, x, y)
isPointInPath(path, x, y, fillRule)
```

### Parameters

`x`

 The x-axis coordinate of the point to check, unaffected by the current
 transformation of the context.


`y`

 The y-axis coordinate of the point to check, unaffected by the current
 transformation of the context.


`fillRule`

 The algorithm by which to determine if a point is inside or outside the path.
 Possible values:


`nonzero`

 The non-zero winding rule.
 Default rule.


`evenodd`

The even-odd winding rule.


`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 specified point is contained in the
 current or specified path, otherwise `false`.


Examples
--------

### Checking a point in the current path

 This example uses the `isPointInPath()` method to check if a point is within
 the current path.

#### HTML


```html
<canvas id="canvas"></canvas>
<p>In path: <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.fill();
result.innerText = ctx.isPointInPath(30, 70);
```


#### Result

### Checking a point in the specified path

 Whenever you move the mouse, this example checks whether the cursor is in a circular
 `Path2D` path. If yes, the circle 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 circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 \* Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle);

// Listen for mouse moves
canvas.addEventListener("mousemove", (event) => {
  // Check whether point is inside circle
  const isPointInPath = ctx.isPointInPath(circle, event.offsetX, event.offsetY);
  ctx.fillStyle = isPointInPath ? "green" : "red";

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


#### Result

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

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

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

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

### Gecko-specific note

* Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), this method
 incorrectly failed to multiply the specified point's coordinates by the current
 transformation matrix before comparing it to the path. Now this method works correctly
 even if the context is rotated, scaled, or otherwise transformed.
See also
--------

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

 The
 **`CanvasRenderingContext2D.moveTo()`**
 method of the Canvas 2D API begins a new sub-path at the point specified by the given
 `(x, y)` coordinates.

Syntax
------


```js
moveTo(x, y)
```

### Parameters

`x`

The x-axis (horizontal) coordinate of the point.

`y`

The y-axis (vertical) coordinate of the point.

### Return value

None (`undefined`).

Examples
--------

### Creating multiple sub-paths

 This example uses `moveTo()` to create two sub-paths within a single path.
 Both sub-paths are then rendered with a single `stroke()` call.

#### HTML


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


#### JavaScript

 The first line begins at (50, 50) and ends at (200, 50). The second line begins at (50,
 90) and ends at (280, 120).


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

ctx.beginPath();
ctx.moveTo(50, 50); // Begin first sub-path
ctx.lineTo(200, 50);
ctx.moveTo(50, 90); // Begin second sub-path
ctx.lineTo(280, 120);
ctx.stroke();
```


#### Result

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

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

 The
 **`CanvasRenderingContext2D.fillStyle`**
 property of the Canvas 2D API specifies the
 color, gradient, or pattern to use inside shapes. The default style is `#000`
 (black).

**Note:** For more examples of fill and stroke styles, see Applying styles and color in the Canvas tutorial.

Value
-----

One of the following:

* A string parsed as CSS `<color>` value.
* A `CanvasGradient` object (a linear or radial gradient).
* A `CanvasPattern` object (a repeating image).
Examples
--------

### Changing the fill color of a shape

This example applies a blue fill color to a rectangle.

#### HTML


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


#### JavaScript


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

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


#### Result

### Creating multiple fill colors using loops

 In this example, we use two `for` loops to draw a grid of rectangles, each
 having a different fill color. To achieve this, we use the two variables `i`
 and `j` to generate a unique RGB color for each square, and only modify the
 red and green values. (The blue channel has a fixed value.) By modifying the channels,
 you can generate all kinds of palettes.
```

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



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

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.fillStyle = `rgb(
 ${Math.floor(255 - 42.5 \* i)}
 ${Math.floor(255 - 42.5 \* j)}
 0)`;
    ctx.fillRect(j \* 25, i \* 25, 25, 25);
  }
}
```


The result looks like this:

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

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

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

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

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

### WebKit/Blink-specific note

 In WebKit- and Blink-based browsers, the non-standard and deprecated method
 `ctx.setFillColor()` is implemented in addition to this property.


```js
setFillColor(color, /\* (optional) \*/ alpha);
setFillColor(grayLevel, /\* (optional) \*/ alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);
```

See also
--------

* Canvas API
* The interface defining this property: `CanvasRenderingContext2D`
* Values used by this property:
    + `<color>` CSS data type
    + `CanvasGradient` object
    + `CanvasPattern` object
CanvasRenderingContext2D: closePath() method
============================================

 The
 **`CanvasRenderingContext2D.closePath()`**
 method of the Canvas 2D API attempts to add a straight line from the current point to
 the start of the current sub-path. If the shape has already been closed or has only one
 point, this function does nothing.

 This method doesn't draw anything to the canvas directly. You can render the path using
 the `stroke()` or
 `fill()` methods.

Syntax
------


```js
closePath()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Closing a triangle

 This example creates the first two (diagonal) sides of a triangle using the
 `lineTo()` method. After that, the triangle's base is created with the
 `closePath()` method, which automatically connects the shape's first and last
 points.

#### HTML


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


#### JavaScript

The triangle's corners are at (20, 140), (120, 10), and (220, 140).


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

ctx.beginPath();
ctx.moveTo(20, 140); // Move pen to bottom-left corner
ctx.lineTo(120, 10); // Line to top corner
ctx.lineTo(220, 140); // Line to bottom-right corner
ctx.closePath(); // Line to bottom-left corner
ctx.stroke();
```


#### Result

### Closing just one sub-path

This example draws a smiley face consisting of three disconnected sub-paths.

**Note:** Although `closePath()` is called after all the arcs have been
 created, only the last arc (sub-path) gets closed.


#### HTML


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


#### JavaScript

The first two arcs create the face's eyes. The last arc creates the mouth.


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

ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();
```


#### Result

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

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

 The
 **`CanvasRenderingContext2D.scale()`**
 method of the Canvas 2D API adds a scaling transformation to the canvas units
 horizontally and/or vertically.

 By default, one unit on the canvas is exactly one pixel. A scaling transformation
 modifies this behavior. For instance, a scaling factor of 0.5 results in a unit size of
 0.5 pixels; shapes are thus drawn at half the normal size. Similarly, a scaling factor
 of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus
 drawn at twice the normal size.

Syntax
------


```js
scale(x, y)
```

### Parameters

`x`

 Scaling factor in the horizontal direction. A negative value flips pixels across the
 vertical axis. A value of `1` results in no horizontal scaling.


`y`

 Scaling factor in the vertical direction. A negative value flips pixels across the
 horizontal axis. A value of `1` results in no vertical scaling.


### Return value

None (`undefined`).

Examples
--------

### Scaling a shape

 This example draws a scaled rectangle. A non-scaled rectangle is then drawn for
 comparison.

#### HTML


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


#### JavaScript

 The rectangle has a specified width of 8 and a height of 20. The transformation matrix
 scales it by 9x horizontally and by 3x vertically. Thus, its final size is a width of 72
 and a height of 60.

 Notice that its position on the canvas also changes. Since its specified corner is (10,
 10), its rendered corner becomes (90, 30).


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

// Scaled rectangle
ctx.scale(9, 3);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 8, 20);

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

// Non-scaled rectangle
ctx.fillStyle = "gray";
ctx.fillRect(10, 10, 8, 20);
```


#### Result

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

### Flipping things horizontally or vertically

 You can use `scale(-1, 1)` to flip the context horizontally and
 `scale(1, -1)` to flip it vertically. In this example, the words "Hello
 world!" are flipped horizontally.

 Note that the call to `fillText()`
 specifies a negative x coordinate. This is to adjust for the negative scaling factor:
 `-280 * -1` becomes `280`, and text is drawn leftwards from that
 point.

#### HTML


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


#### JavaScript


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

ctx.scale(-1, 1);
ctx.font = "48px serif";
ctx.fillText("Hello world!", -280, 90);
ctx.setTransform(1, 0, 0, 1, 0, 0);
```


#### Result

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

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

 The
 **`CanvasRenderingContext2D.translate()`**
 method of the Canvas 2D API adds a translation transformation to the current matrix.

Syntax
------


```js
translate(x, y)
```


 The `translate()` method adds a translation transformation to the current
 matrix by moving the canvas and its origin `x` units horizontally and
 `y` units vertically on the grid.

![A canvas's origin moved on the x and y axes based on the values of the translate method.](/en-US/docs/Web/API/CanvasRenderingContext2D/translate/canvas_grid_translate.png)

### Parameters

`x`

 Distance to move in the horizontal direction. Positive values are to the right, and
 negative to the left.


`y`

 Distance to move in the vertical direction. Positive values are down, and negative
 are up.


### Return value

None (`undefined`).

Examples
--------

### Moving a shape

 This example draws a square that is moved from its default position by the
 `translate()` method. An unmoved square of the same size is then drawn for
 comparison.

#### HTML


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


#### JavaScript

 The `translate()` method translates the context by 110 horizontally and 30
 vertically. The first square is shifted by those amounts from its default position.


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

// Moved square
ctx.translate(110, 30);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 80, 80);

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

// Unmoved square
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 80, 80);
```


#### Result

The moved square is red, and the unmoved square is gray.

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-translate-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`