recursal/MDN huggingface dataset:
CanvasRenderingContext2D.closePath()
====================================

**`CanvasRenderingContext2D.closePath()`** - метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.

Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как `stroke()` и `fill()`.

Синтаксис
---------
```

void ctx.closePath();
```

Примеры
-------

### Замкнутый треугольник

В этом примере создаются две первые линии сторон треугольника с использованием метода `lineTo()`. После чего метод `closePath()` заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).

#### HTML


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


#### JavaScript

Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).


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

ctx.beginPath();
ctx.moveTo(20, 140); // Двигает перо к нижнему левому углу
ctx.lineTo(120, 10); // Рисует линию к верхнему углу
ctx.lineTo(220, 140); // Рисует линию к нижнему правому углу
ctx.closePath(); // Рисует линию к нижнему левому углу
ctx.stroke();
```


#### Результат

### Закрытие пути один раз

Этот пример рисует смайлик, состоящий из трёх не соединённых дуг (под путей).

**Примечание:** Хотя `closePath()` вызывается после создания всех дуг, закрывается только последняя.

#### HTML


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


#### JavaScript

Первые две дуги создают глаза, последняя создаёт рот.


```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();
```


#### Результат

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Интерфейс, определяющий этот метод: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.beginPath()`
CanvasRenderingContext2D.lineDashOffset
=======================================

Свойство **`CanvasRenderingContext2D.lineDashOffset`** в Canvas 2D API устанавливает смещение штрихов, или «фаза».

**Примечание:** Линии нарисованы вызовом метода `stroke()`.

Синтаксис
---------
```

ctx.lineDashOffset = value;
```


`value`

Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.

Примеры
-------

### Смещение штрихов

Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.

#### HTML


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


#### JavaScript


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

ctx.setLineDash([4, 16]);

// Пунктирная линия без смещения
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Пунктирная линия со смещением 4
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineDashOffset = 4;
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();
```


#### Результат

Линия со смещением будет нарисована красным цветом.

### Эффект марширующих муравьёв

Эффект марширующих муравьёв - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..
```

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



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

const draw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10, 10, 100, 100);
};

const march = () => {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
};

march();
```

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Интерфейс, определяющий это свойство: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.getLineDash()`
* `CanvasRenderingContext2D.setLineDash()` (en-US)
* Применение стилей и цвета
CanvasRenderingContext2D.rotate()
=================================

Метод **`CanvasRenderingContext2D.rotate()`** из Canvas 2D API добавляет поворот в матрицу преобразования. Параметр angle - это угол поворота по часовой стрелке, в радианах.

Syntax
------
```

void ctx.rotate(angle);
```


![](/ru/docs/Web/API/CanvasRenderingContext2D/rotate/canvas_grid_rotate.png)

### Parameters

`angle`

Угол поворота по часовой стрелке, в радианах. Вы также можете использовать `degree * Math.PI / 180` если вы хотите использовать для угла значение градуса (degree).

Центром вращения всегда является начало холста. Для изменения центра вращения, нам необходимо передвинуть холст, используя метод `translate()` (en-US).

Примеры
-------

### Использование метода `rotate`

Ниже приведён простой пример кода, который использует метод `rotate`.

#### HTML


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


#### JavaScript


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

ctx.rotate((45 \* Math.PI) / 180);
ctx.fillRect(70, 0, 100, 30);

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


Отредактируйте приведённый ниже код и посмотрите, как обновляются ваши изменения на холсте:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></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.rotate(45 * Math.PI / 180);
ctx.fillRect(70,0,100,30);
ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea
>
```


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

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

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

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

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

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* The interface defining it, `CanvasRenderingContext2D`
CanvasRenderingContext2D.bezierCurveTo()
========================================

Сводка
------

Метод **`CanvasRenderingContext2D.bezierCurveTo()`**, предоставляемый Canvas 2D API, добавляет кубическую кривую Безье к контуру. Для построения требуются три точки. Первые две точки являются контрольными, а третья - конечной. Начальной точкой является последняя точка в текущем контуре, и она может быть изменена методом `moveTo()` перед созданием кривой Безье.

Синтаксис
---------
```

void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
```

### Параметры

`cp1x`

Координата первой контрольной точки по оси x.

`cp1y`

Координата первой контрольной точки по оси y.

`cp2x`

Координата второй контрольной точки по оси x.

`cp2y`

Координата второй контрольной точки по оси y.

`x`

Координата конечной точки по оси x.

`y`

Координата конечной точки по оси y.

Примеры
-------

### Использование метода `bezierCurveTo`

Ниже представлен простой фрагмент кода, рисующий кривую Безье. Контрольные точки нарисованы красным цветом, а начальная и конечная точки - синим.

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();

ctx.fillStyle = "blue";
// начальная точка
ctx.fillRect(50, 20, 10, 10);
// конечная точка
ctx.fillRect(50, 100, 10, 10);

ctx.fillStyle = "red";
// первая контрольная точка
ctx.fillRect(230, 30, 10, 10);
// вторая контрольная точка
ctx.fillRect(150, 70, 10, 10);
```

### Практическое применение `bezierCurveTo`

Вы можете редактировать код, представленный ниже, и внесённые вами изменения отобразятся на холсте в режиме реального времени:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></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.bezierCurveTo(50, 100, 180, 10, 20, 10);
ctx.stroke();</textarea
>
```


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

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

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

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

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

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Интерфейс, предоставляющий данный метод: `CanvasRenderingContext2D`
* Статья в Википедии про кривые Безье.
CanvasRenderingContext2D.strokeText()
=====================================

Метод **`CanvasRenderingContext2D.strokeText()`**, предоставляемый Canvas 2D API, выполняет обводку заданного текста в заданной позиции (*x, y*). Если указан необязательный четвёртый параметр, текст будет масштабироваться в соответствие с указанной максимальной шириной.

Смотрите также метод `CanvasRenderingContext2D.fillText()` для заливки контуров текста.

Синтаксис
---------
```

void ctx.strokeText(text, x, y [, maxWidth]);
```

### Параметры

`text`

Текст, использующий для визуализации следующие свойства: `font`, `textAlign`, `textBaseline` и `direction` (en-US).

`x`

Координата левой нижней точки текста по оси x.

`y`

Координата левой нижней точки текста по оси y.

`maxWidth` Необязательный

Максимальная ширина текста. Если ширина надписи больше параметра, текст масштабируется по горизонтали, или, если это невозможно (надпись становится нечитаемой), уменьшается размер шрифта.

Примеры
-------

### Использование метода strokeText

Ниже представлен простой фрагмент кода, использующий strokeText.

#### HTML


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


#### JavaScript


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

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


Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></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.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);</textarea
>
```


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

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

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

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

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

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Интерфейс, предоставляющий данный метод: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillText()`
CanvasRenderingContext2D.fillStyle
==================================

Свойство **`CanvasRenderingContext2D.fillStyle`**, предоставляемое Canvas 2D API, задаёт цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение `#000` (чёрный цвет).

**Примечание:** Смотрите также главу Applying styles and color в Canvas Tutorial.

Синтаксис
---------
```

ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;
```

### Значения

`color`

`DOMString` строка, содержащая цвет в формате, поддерживающимся стандартом CSS (`<color>`).

`gradient`

Объект класса `CanvasGradient` (линейный или круговой градиент ).

`pattern`

Объект класса `CanvasPattern` (повторяющееся изображение).

Примеры
-------

### Изменение цвета заливки фигуры

Ниже представлен простой фрагмент кода, использующий `fillStyle` с цветом.

#### 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);
```


#### Результат

### Использование fillStyle в циклах for

В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные `i` и `j`, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зелёный цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.
```

<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);
  }
}
```


#### Результат

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

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Canvas API
* Интерфейс предоставляющий данное свойство: `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasPattern`
CanvasRenderingContext2D.fillText()
===================================

Метод **`CanvasRenderingContext2D.fillText()`**, предоставляемый Canvas 2D API, рисует (заливает) заданный текст в заданной позиции (*x, y*). Если указан необязательный четвёртый параметр, текст будет масштабироваться в соответствии с указанной максимальной шириной.

Смотрите также метод `CanvasRenderingContext2D.strokeText()` для выполнения обводки текста.

Синтаксис
---------
```

void ctx.fillText(text, x, y [, maxWidth]);
```

### Параметры

`text`

Текст, использующий для визуализации следующие свойства: `font`, `textAlign`, `textBaseline` и `direction` (en-US).


`x`

Координата левой нижней точки текста по оси x.

`y`

Координата левой нижней точки текста по оси y.

`maxWidth` Необязательный

Максимальная ширина текста. Если ширина надписи больше параметра, текст масштабируется по горизонтали, или, если это невозможно (надпись становится нечитаемой), уменьшается размер шрифта.

Примеры
-------

### Использование метода fillText

Ниже представлен простой фрагмент кода, использующий fillText.

#### HTML


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


#### JavaScript


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

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


Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></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.font = "48px serif";
ctx.fillText("Hello world", 50, 100);</textarea
>
```


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

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

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

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

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

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Интерфейс, предоставляющий данный метод: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.strokeText()`
CanvasRenderingContext2D.font
=============================

**`CanvasRenderingContext2D.font`** – свойство Canvas 2D API, определяющее текущие стили рисуемого текста. Это строка, которая использует синтаксис CSS font.

Синтаксис
---------
```

ctx.font = value;
```

### Опции

`value`

Строка `DOMString` с разобранным CSS `font` значением. Значение по умолчанию – "10px sans-serif".

Примеры
-------

### Использование пользовательского шрифта

Этот пример задаёт в свойстве `font` другие `font-size` и `font-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);
```


#### Результат

### Загрузка шрифта с помощью CSS Font Loading API

С помощью `FontFace` API, вы можете явно загрузить шрифт перед использованием его в `canvas`.


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

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

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Интерфейс, определяющий это свойство: `CanvasRenderingContext2D`
CanvasRenderingContext2D.beginPath()
====================================

Метод **`CanvasRenderingContext2D.beginPath()`** Canvas 2D API запускает новый путь, опуская список подпутей. Вызовите этот метод, когда хотите создать новый путь.

Синтаксис
---------
```

void ctx.beginPath();
```

Примеры
-------

### Использование `beginPath` метода

Это простой фрагмент кода, использующий `beginPath` метод.

#### HTML


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


#### JavaScript


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

// Первый путь
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Второй путь
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
```


Отредактируйте код ниже чтобы увидеть изменения в canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></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" style="height:200px">
// 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();</textarea
>
```


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

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

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

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

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

Спецификации
------------

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

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Интерфейс, определяющий это, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.closePath()`