CanvasRenderingContext2D.stroke() - Интерфейсы веб API

CanvasRenderingContext2D.stroke()
=================================

Метод **`CanvasRenderingContext2D.stroke()`** Canvas 2D API обводит текущий или данный контур цветом `strokeStyle`.

Обводка выравнивается по центру контура, другими словами, половина линии обводки рисуется с внутренней стороны контура, и половина с внешней.

Обводка отрисовывается согласно правилу ненулевого индекса, а значит, пересекающиеся части контура также будут обведены.

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

void ctx.stroke();
void ctx.stroke(path);
```

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

`path`

`Path2D` (en-US) - контур, который нужно обвести.

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

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

В этом примере с помощью метода `rect()` создаётся прямоугольник, и затем с помощью `stroke()` отрисовывается на холсте.

#### HTML

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

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.stroke();
```

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

<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.rect(10, 10, 100, 100);
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-stroke-dev |

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

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

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

* Интерфейс, предоставляющий этот метод - `CanvasRenderingContext2D`.


CanvasRenderingContext2D.globalAlpha - Интерфейсы веб API

CanvasRenderingContext2D.globalAlpha
====================================

Свойство **`CanvasRenderingContext2D.globalAlpha`** Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.

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

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

ctx.globalAlpha = value;
```

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

`value`

Число между `0.0` (полная прозрачность) и `1.0` (полная непрозрачность), включительно. Дефолтное значение `1.0`. Значение, не входящее в указанный диапазон, включая `Infinity` и `NaN`, не будут применены, и `globalAlpha` сохранит предыдущее значение или значение по умолчанию.

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

### Отрисовка полупрозрачных фигур

В этом примере используется свойство `globalAlpha` для отрисовки двух полупрозрачных прямоугольников.

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

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

### Наложение прозрачных фигур

Этот пример демонстрирует эффект наложения нескольких прозрачных фигур друг на друга. Мы начнём с отрисовки непрозрачного фона, состоящего из четырёх разноцветных квадратов. Далее мы устанавливаем свойство `globalAlpha` равное `0.2` (20% прозрачности); Уровень прозрачности будет применён ко всем прозрачным фигурам. Затем мы используем цикл `for` для отрисовки нескольких кругов с увеличивающимися радиусами.

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

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

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

// Рисуем фон
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";

// Устанавливаем уровень прозрачности
ctx.globalAlpha = 0.2;

// Рисуем круги
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 |

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

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

Читайте также
-------------

* The interface defining this property: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.globalCompositeOperation` (en-US)


CanvasRenderingContext2D.arc() - Интерфейсы веб API

CanvasRenderingContext2D.arc()
==============================

**`CanvasRenderingContext2D.arc()`** метод Canvas 2D API добавляет дугу к пути с центром *(x, y)* и с радиусом *r* с началом в *startAngle* и с концом *endAngle* и с направлением против часовой стрелки (по умолчанию по часовой стрелке).

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

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
```

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

`x`

X координата центра дуги.

`y`

Y координата центра дуги.

`radius`

Радиус.

`startAngle`

Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.

`endAngle`

Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.

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

 Необязательный `Boolean`. Задаёт направление рисования дуги.
 Если `true` - против часовой, `false` - по часовой.

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

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

Ниже приведён пример простого кода который рисует круг.

#### HTML

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

#### JavaScript

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

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

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):
```

<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.arc(50, 50, 50, 0, 2 * Math.PI, false);
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);
```

### Демонстрация разных форм дуг

В этом примере нарисованные разные формы чтобы показать возможности метода `arc()`.
```

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

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

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

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

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

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

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

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

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

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

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

* Интерфейс `Canvas`, `CanvasRenderingContext2D`


CanvasRenderingContext2D.lineTo() - Интерфейсы веб API

CanvasRenderingContext2D.lineTo()
=================================

**`lineTo()`** - метод `CanvasRenderingContext2D`, часть Canvas 2D API, добавляет линию к текущему под пути с конечной точкой с координатами `(x, y)`.

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

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

ctx.lineTo(x, y);
```

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

`x`

OX значение конца линии.

`y`

OY значение конца линии.

### Возвращаемое значение

`undefined`.

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

### Рисование прямых линий

Этот пример рисует прямую линию используя метод `lineTo()`.

#### HTML

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

#### JavaScript

Линия начинается в точке (30, 50), а заканчивается в точке (150, 100).

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

ctx.beginPath(); // Начинает новый путь
ctx.moveTo(30, 50); // Передвигает перо в точку (30, 50)
ctx.lineTo(150, 100); // Рисует линию до точки (150, 100)
ctx.stroke(); // Отображает путь
```

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

### Рисование соединённых линий

Каждый вызов `lineTo()` автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.

#### HTML

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

#### JavaScript

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

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

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

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

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

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

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

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

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


CanvasRenderingContext2D.save() - Интерфейсы веб API

CanvasRenderingContext2D.save()
===============================

**`CanvasRenderingContext2D.save()`** - метод Canvas 2D API. Сохраняет все состояния и добавляет текущее состояние в стек.

### Состояние чертежа

Состояние чертежа, которое сохраняется в стеке, состоит из:

* Текущая матрица преобразования.
* Текущая область отсечения.
* The current dash list.
* Текущие значения следующих атрибутов: `strokeStyle`, `fillStyle`, `globalAlpha`, `lineWidth`, `lineCap`, `lineJoin`, `miterLimit`, `lineDashOffset`, `shadowOffsetX` (en-US), `shadowOffsetY` (en-US), `shadowBlur` (en-US), `shadowColor` (en-US), `globalCompositeOperation` (en-US), `font`, `textAlign`, `textBaseline`, `direction` (en-US), `imageSmoothingEnabled` (en-US).
Синтаксис
---------
```

void ctx.save();
```

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

### Сохранение состояния чертежа

Этот пример использует метод `save()` для сохранения состояния по умолчанию, и метод `restore()` для восстановления состояния позже, чтобы позже можно было нарисовать прямоугольник с состоянием по умолчанию.

#### HTML

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

#### JavaScript
```

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Сохранение состояния по умолчанию
ctx.save();

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

// Восстановление состояния по умолчанию
ctx.restore();

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

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

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

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

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

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

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

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


CanvasRenderingContext2D.measureText() - Интерфейсы веб API

CanvasRenderingContext2D.measureText()
======================================

Метод **`CanvasRenderingContext2D.measureText()`**, предоставляемый Canvas 2D API, возвращает объект `TextMetrics` (en-US), содержащий информацию об измеренном тексте (например, ширину).

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

ctx.measureText(text);
```

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

`text`

Строка `String` для измерения.

### Возвращаемое значение

Объект `TextMetrics` (en-US).

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

Используя элемент `<canvas>`:

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

... вы можете получить объект `TextMetrics` (en-US), используя следующий код:

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

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

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

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

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

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

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

* Интерфейс, определяющий этот метод: `CanvasRenderingContext2D`
* `TextMetrics` (en-US)


CanvasRenderingContext2D.createLinearGradient() - Интерфейсы веб API

CanvasRenderingContext2D.createLinearGradient()
===============================================

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

![](/ru/docs/Web/API/CanvasRenderingContext2D/createLinearGradient/mdn-canvas-lineargradient.png)

Этот метод возвращает линейный `CanvasGradient`. Для того, чтобы быть добавленным к фигуре, градиент должен быть задан свойством `fillStyle` или `strokeStyle`.

**Примечание:** Координаты градиента глобальны, т.е. относятся к текущему пространству координат. При добавлении градиента, его координаты определяются НЕ относительно координат фигур.

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

CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
```

Метод `createLinearGradient()` принимает четыре аргумента для определения начала и конца точек линии градиента.

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

`x0`

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

`y0`

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

`x1`

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

`y1`

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

### Возвращаемое значение

`CanvasGradient`

Линейный `CanvasGradient`, определённый линией.

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

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

В примере создаётся и добавляется линейный градиент, используя метод `createLinearGradient()`. Градиент имеет три точки остановки цвета между созданными начальной и конечной точками линии.

#### HTML

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

#### JavaScript

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

// Создание линейного градиента
// Точка начала линии градиента: x=20, y=0
// Точка конца линии градиента: x=220, y=0
var gradient = ctx.createLinearGradient(20, 0, 220, 0);

// Добавление трёх контрольных точек
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");

// Установка стиля заливки и отрисовка прямоугольника градиента
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);
```

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

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

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

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

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

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

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


CanvasRenderingContext2D.moveTo() - Интерфейсы веб API

CanvasRenderingContext2D.moveTo()
=================================

Метод **`CanvasRenderingContext2D.moveTo()`**, предоставляемый Canvas 2D API, перемещает начальную точку нового фрагмента контура в координаты `(x, y)`.

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

void ctx.moveTo(x, y);
```

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

`x`

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

`y`

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

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

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

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

#### HTML

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

#### JavaScript

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
```

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

<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.moveTo(50,50);
ctx.lineTo(200, 50);
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-moveto-dev |

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

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

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

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


CanvasRenderingContext2D.restore() - Интерфейсы веб API

CanvasRenderingContext2D.restore()
==================================

Метод **`CanvasRenderingContext2D.restore()`** восстанавливает предварительно сохранённое состояние канваса из стека. Если состояние ранее не сохранялось, то метод ничего не делает.

Fore more information about the drawing state (en-US), see `CanvasRenderingContext2D.save()`.

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

void ctx.restore();
```

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

### Restoring a saved state

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

#### HTML

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

#### JavaScript

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

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

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

// Restore the default state
ctx.restore();

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

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

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

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

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

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

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

* The interface defining this method: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.save()`


CanvasRenderingContext2D.lineWidth - Интерфейсы веб API

CanvasRenderingContext2D.lineWidth
==================================

`Свойство CanvasRenderingContext2D`**`.lineWidth`**, предоставляемое Canvas 2D API задаёт толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, `Infinity` и `NaN` игнорируются.

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

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

ctx.lineWidth = value;
```

### Значения

`value`

Число, задающее толщину линии в пикселах. Ноль, отрицательные числа, `Infinity` и `NaN` игнорируются.

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

### Использование свойства lineWidth

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

#### HTML

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

#### JavaScript

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

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineWidth = 15;
ctx.lineTo(100, 100);
ctx.stroke();
```

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

<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.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineTo(100, 100);
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-linewidth-dev |

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

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

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

* Интерфейс, предоставляющий это свойство: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineCap`
* `CanvasRenderingContext2D.lineJoin`


CanvasRenderingContext2D.textBaseline - Интерфейсы веб API

CanvasRenderingContext2D.textBaseline
=====================================

**`CanvasRenderingContext2D.textBaseline`** - свойство Canvas 2D API, указывающее на текущую базовую линию при рисовании текста.

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

ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
```

### Опции

Возможные значения:

`"top"`

The text baseline is the top of the em square.

`"hanging"`

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

`"middle"`

The text baseline is the middle of the em square.

`"alphabetic"`

The text baseline is the normal alphabetic baseline. Значение по умолчанию.

`"ideographic"`

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

`"bottom"`

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

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

### Сравнение значений свойства

Этот пример демонстрирует различные значения свойства `textBaseline` и отображение линий при их применениях.

#### HTML

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

#### JavaScript

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

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

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

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

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

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

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

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

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

* Интерфейс определяющий это свойство: `CanvasRenderingContext2D`


CanvasRenderingContext2D.ellipse() - Интерфейсы веб API

CanvasRenderingContext2D.ellipse()
==================================

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

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

void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
```

`ellipse()` - метод, который создаёт эллиптическую дугу с центром в точках `(x, y)` с радиусом `radiusX` и `radiusY`. Путь начинается от точки `startAngle` и заканчивается в точке `endAngle`, идёт по направлению, казанному в параметре (по часовой стрелке или против неё) `anticlockwise` .

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

`x`

Координата центра эллипса по оси x (горизонтальная).

`y`

Координата центра эллипса по оси y (вертикальная).

`radiusX`

Радиус оси x эллипса. Должен быть неотрицательным.

`radiusY`

Радиус оси y эллипса. Должен быть неотрицательным.

`rotation`

Вращение эллипса, выраженное в радианах.

`startAngle`

Угол, под которым начинается эллипс, измеряется по часовой стрелке от положительной оси x и выражается в радианах.

`endAngle`

Угол, под которым эллипс заканчивается, измеряется по часовой стрелке от положительной оси x и выражается в радианах.

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

Опция `Boolean`, которая при `true`, рисует эллипс против часовой стрелки (counter-clockwise). Значение по умолчанию равно `false` - рисование по часовой стрелке (clockwise).

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

### Рисование полного эллипса

Этот пример рисует эллипс под углом π / 4 Радианы (45°). Чтобы сделать полный эллипс, дуга начинается под углом 0 радианов (0°) и заканчивается под углом 2π радианов (360°).

#### HTML

```html
<canvas id="canvas" width="200" height="200"></canvas>
```

#### JavaScript

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

// Рисование эллипса
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 \* Math.PI);
ctx.stroke();

// Рисование линии отражения эллипса
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();
```

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

### Различные эллиптические дуги

В этом примере создаются три эллиптических контура с различными свойствами.

#### HTML

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

#### JavaScript

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

ctx.fillStyle = "red";
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI \* 0.25, 0, Math.PI \* 1.5);
ctx.fill();

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI \* 0.25, 0, Math.PI);
ctx.fill();

ctx.fillStyle = "green";
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI \* 0.25, 0, Math.PI, true);
ctx.fill();
```

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

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

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

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

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

Изучите также
-------------

* Интерфейс, определяющий этот метод:`CanvasRenderingContext2D`
* Используйте `CanvasRenderingContext2D.arc()`, чтобы нарисовать дугу окружности


CanvasRenderingContext2D.getLineDash() - Интерфейсы веб API

CanvasRenderingContext2D.getLineDash()
======================================

Метод **`CanvasRenderingContect2D.getLineDash()`**, предоставляемый Canvas 2D API который возвращает текущий паттерн штриховки линии.

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

ctx.getLineDash();
```

### Возвращаемое значение

`Array` (массив) чисел которые обозначают расстояния рисования линий и разрывов (в единицах пространства координат). Если число заданных элементов нечётное, то заданные элементы массива копируются и суммируются. Например, установив штрихи линии как `[5, 15, 25]` в результате мы получим `[5, 15, 25, 5, 15, 25]`.

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

### Получение текущей настройки штриховки линии

Этот пример демонстрирует метод `getLineDash()`.

#### HTML

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

#### JavaScript

Используя `setLineDash()` (en-US) задано, что штрихи состоят из отрезков в 10 единиц и разрывами между ними в 20 единиц.

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

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

// Нарисовать штрихованную линию
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();
```

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

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

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

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

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

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

* Интерфейс, предоставляющий данный метод: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.setLineDash()` (en-US)
* `CanvasRenderingContext2D.lineDashOffset`


CanvasRenderingContext2D.miterLimit - Интерфейсы веб API

CanvasRenderingContext2D.miterLimit
===================================

Свойство **CanvasRenderingContext2D.miterLimit** устанавливает/возвращает максимальную длину среза.

Длина среза это расстояние между внутренним и внешнем углом, образованным пересечением двух линий.

**Примечание:** For more info about miters, see Applying styles and color in the Canvas tutorial.

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

ctx.miterLimit = число;
```

### Options

`число`

Положительное число, определяющее максимальную длину среза. Если текущая длина среза будет превышать заданное значение, то угол будет отображаться как при значении `bevel` свойства `lineJoin`.

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

### Using the `miterLimit` property

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

<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.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineTo(100, 100);
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);
```

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

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

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

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

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

See also
--------

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


CanvasRenderingContext2D.closePath() - Интерфейсы веб API

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 - Интерфейсы веб API

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() - Интерфейсы веб API

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() - Интерфейсы веб API

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() - Интерфейсы веб API

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.strokeStyle - Интерфейсы веб API

CanvasRenderingContext2D.strokeStyle
====================================

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

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

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

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

### Значения

`color`

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

`gradient`

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

`pattern`

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

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

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

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

#### HTML

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

#### JavaScript

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

ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 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.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 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);
```

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

В этом примере свойство `strokeStyle` используется для рисования границ фигур. Мы используем метод `arc()` для рисования кругов.

```js
var ctx = document.getElementById("canvas").getContext("2d");
for (var i = 0; i < 6; i++) {
  for (var 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();
  }
}
```

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

Результат выглядит так:

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

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

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

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

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

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

* Интерфейс предоставляющий данное свойство: `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasPattern`


CanvasRenderingContext2D.fillStyle - Интерфейсы веб API

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() - Интерфейсы веб API

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 - Интерфейсы веб API

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.drawImage() - Интерфейсы веб API

CanvasRenderingContext2D.drawImage()
====================================

**`CanvasRenderingContext2D.drawImage()`** метод Canvas 2D API предоставляет разные способы рисования изображения на холсте.

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

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
```

![drawImage](/ru/docs/Web/API/CanvasRenderingContext2D/drawImage/canvas_drawimage.jpg)

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

`image`

Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте (`CanvasImageSource` (en-US)), конкретнее, `CSSImageValue` (en-US), `HTMLImageElement`, `SVGImageElement` (en-US), `HTMLVideoElement`, `HTMLCanvasElement`, `ImageBitmap` или `OffscreenCanvas` (en-US).

`dx`

Координата по оси Х, обозначающая стартовую точку холста-приёмника, в которую будет помещён верхний левый угол исходного `image`.

`dy`

Координата по оси Y, обозначающая стартовую точку холста-приёмника, в которую будет помещён верхний левый угол исходного `image`.

`dWidth`

Ширина изображения, полученного из исходного `image`. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.

`dHeight`

Высота изображения, полученного из исходного `image`. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.

`sx`

Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещён в контекст-приёмник.

`sy`

Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещён в контекст-приёмник.

`sWidth`

Ширина фрагмента, который будет вырезан из изображения источника и помещён в контекст-приёмник. Если не задана, фрагмент от точки, заданной `sx` и `sy` до правого нижнего угла источника будет целиком скопирован в контекст-приёмник.

`sHeight`

Высота фрагмента, который будет вырезан из изображения источника и помещён в контекст-приёмник.

### Исключения

`INDEX_SIZE_ERR`

Выбрасывается, если ширина или высота источника или приёмника равна нулю.

`INVALID_STATE_ERR`

Источник не имеет данных изображения.

`TYPE_MISMATCH_ERR`

Тип данных источника не поддерживается.

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

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

Вот простой пример использования `drawImage`.

#### HTML

```html
<canvas id="canvas"></canvas>
  <img id="source" src="rhino.jpg"
 width="300" height="227">
</div>
```

#### JavaScript

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

ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
```

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

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
  <img id="source" src="rhino.jpg" width="300" height="227">
</div>
<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.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById("source");
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);
```

### Понимание размеров изображения-источника

Метод `drawImage()` использует *внутренние размеры* элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).

Например, если изображение было загружено с использованием необязательных параметров `width` и `height` в конструкторе `HTMLImageElement`, вместо `element.width` и `element.height` вам следует использовать свойства `naturalWidth` и `naturalHeight` экземпляра картинки (или `videoWidth` и `videoHeight`, если источник `<video>`), чтобы добиться правильного масштабирования и получения фрагментов картинки.

#### HTML

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

#### JavaScript

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

var image = new Image(60, 45); // Размер изображения
image.onload = drawImageActualSize; // Рисуем изображение, когда оно будет загружено

// load an image of intrinsic size 300x227 in CSS pixels
image.src = "rhino.jpg";

function drawImageActualSize() {
  // use the intrinsic size of image in CSS pixels for the canvas element
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;

  // will draw the image as 300x227 ignoring the custom size of 60x45
  // given in the constructor
  ctx.drawImage(this, 0, 0);

  // To use the custom size we'll have to specify the scale parameters
  // using the element's width and height properties - lets draw one
  // on top in the corner:
  ctx.drawImage(this, 0, 0, this.width, this.height);
}
```

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

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

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

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

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

Дополнительно
-------------

* `drawImage()` корректно работает с `HTMLVideoElement` только в том случае, когда `HTMLMediaElement.readyState` (en-US) **больше единицы** (т.е., событие **seek** корректно вызывается после установки свойства `currentTime`)
* `drawImage()` будет использовать внутренний размер элемента-источника, выраженный в CSS-пикселях, при рисовании, фрагментировании или масштабировании.
* `drawImage()` проигнорирует все EXIF-данные изображений, в том числе и `Orientation`. Такое поведение метода особенно проблематично для iOS-устройств. Вам потребуется распознать ориентацию самостоятельно и использовать `rotate()` для её корректировки.
Смотрите также
--------------

* Родительский интерфейс метода `CanvasRenderingContext2D`.


CanvasRenderingContext2D.putImageData() - Интерфейсы веб API

CanvasRenderingContext2D.putImageData()
=======================================

**`CanvasRenderingContext2D.putImageData()`** метод Canvas 2D API рисует данные из заданного `ImageData` объекта на холст. На этот метод не влияет матрица преобразования холста.

**Примечание:** Данные изображения могут быть получены с холста с помощью метода `getImageData()`.

Вы можете найти больше информации о `putImageData()` и общих манипуляциях с содержимым холста в статье Пиксельные манипуляции с холстом.

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

void ctx.putImageData(imageData, dx, dy);
void ctx.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
```

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

`imageData`

Объект `ImageData`, содержащий массив значений пикселей..

`dx`

Горизонтальная позиция (координата x), в которой необходимо разместить данные изображения на целевом холсте.

`dy`

Вертикальная позиция (координата y), в которой необходимо разместить данные изображения на целевом холсте.

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

Горизонтальная позиция (координата x) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.

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

Вертикальная позиция (координата y) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.

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

Ширина прямоугольника для рисования. По умолчанию ширина данных изображения.

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

Высота прямоугольника для рисования. По умолчанию высота данных изображения.

### Ошибки

`NotSupportedError`

Выбрасывается, если любой из аргументов бесконечен.

`InvalidStateError`

Выбрасывается, если данные объекта ImageData были отделены.

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

### Понимание putImageData

Чтобы понять, что этот алгоритм делает под капотом, вот реализация сверху `CanvasRenderingContext2D.fillRect()`.

#### HTML

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

#### JavaScript

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

function putImageData(
  ctx,
 imageData,
 dx,
 dy,
 dirtyX,
 dirtyY,
 dirtyWidth,
 dirtyHeight,
) {
  let data = imageData.data;
  let height = imageData.height;
  let width = imageData.width;
  dirtyX = dirtyX || 0;
  dirtyY = dirtyY || 0;
  dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
  dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
  let limitBottom = dirtyY + dirtyHeight;
  let limitRight = dirtyX + dirtyWidth;
  for (let y = dirtyY; y < limitBottom; y++) {
    for (let x = dirtyX; x < limitRight; x++) {
      var pos = y \* width + x;
      ctx.fillStyle =
        "rgba(" +
        data[pos \* 4 + 0] +
        "," +
        data[pos \* 4 + 1] +
        "," +
        data[pos \* 4 + 2] +
        "," +
        data[pos \* 4 + 3] / 255 +
        ")";
      ctx.fillRect(x + dx, y + dy, 1, 1);
    }
  }
}

// Нарисуйте контент на холсте
ctx.fillRect(0, 0, 100, 100);
// Создайте объект ImageData из него
let imagedata = ctx.getImageData(0, 0, 100, 100);
// используйте функцию putImageData, которая иллюстрирует, как работает putImageData
putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
```

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

### Потеря данных из-за оптимизации браузера

**Предупреждение:** Из-за характера потерь при преобразовании в и из предварительно умноженных значений альфа-цвета пиксели, которые были только что установлены с помощью `putImageData()`, могут быть возвращены в эквивалентный `getImageData()` в качестве различных значений.

#### JavaScript

```js
const canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
const context = canvas.getContext("2d");
const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imgData.data;

pixels[0 + 0] = 1;
pixels[0 + 1] = 127;
pixels[0 + 2] = 255;
pixels[0 + 3] = 1;

console.log("before:", pixels);
context.putImageData(imgData, 0, 0);
const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels2 = imgData2.data;
console.log("after:", pixels2);
```

Вывод может выглядеть так:
```

before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ]
after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]
```

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

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

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

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

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

* Интерфейс, определяющий это свойство: `CanvasRenderingContext2D`
* `ImageData` объект
* `CanvasRenderingContext2D.getImageData()`
* Пиксельные манипуляции с холстом


CanvasRenderingContext2D.beginPath() - Интерфейсы веб API

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


CanvasRenderingContext2D.strokeRect() - Интерфейсы веб API

CanvasRenderingContext2D.strokeRect()
=====================================

Метод **`CanvasRenderingContext2D.strokeRect()`**, предоставляемый Canvas 2D API, рисует на холсте прямоугольник, имеющий начальную точку с координатами *(x, y)*, а так же ширину *w* и высоту *h*, используя текущий стиль линий.

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

void ctx.strokeRect(x, y, width, height);
```

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

`x`

Координата начальной точки прямоугольника по оси x.

`y`

Координата начальной точки прямоугольника по оси y.

`width`

Ширина прямоугольника.

`height`

Высота прямоугольника.

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

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

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

#### HTML

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

#### JavaScript

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

ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 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.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 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-strokerect-dev |

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

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

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

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


CanvasRenderingContext2D.canvas - Интерфейсы веб API

CanvasRenderingContext2D.canvas
===============================

Свойство **`CanvasRenderingContext2D.canvas`** является доступной только для чтения ссылкой на объект `HTMLCanvasElement`, связанный с текущим контекстом. Может иметь значение `null`, если контекст не связан с элементом `<canvas>`.

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

ctx.canvas;
```

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

Создадим элемент `<canvas>`:

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

Вы можете получить ссылку на этот элемент из объекта `CanvasRenderingContext2D,` используя свойство `canvas`:

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

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

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

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

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

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

* `CanvasRenderingContext2D`
* Canvas API


CanvasRenderingContext2D.fillRect() - Интерфейсы веб API

CanvasRenderingContext2D.fillRect()
===================================

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

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

void ctx.fillRect(x, y, width, height);
```

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

`x`

Координата начальной точки прямоугольника по оси x.

`y`

Координата начальной точки прямоугольника по оси y.

`width`

Ширина прямоугольника.

`height`

Высота прямоугольника.

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

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

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

#### HTML

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

#### JavaScript

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

// залить canvas целиком
// ctx.fillRect(0, 0, canvas.width, canvas.height);
```

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

<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.fillStyle = "green";
ctx.fillRect(10, 10, 100, 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-fillrect-dev |

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

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

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

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


CanvasRenderingContext2D.textAlign - Интерфейсы веб API

CanvasRenderingContext2D.textAlign
==================================

Свойство **`CanvasRenderingContext2D.textAlign`** Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода `fillText()`. Так что, если значение `textAlign` равно `"center"`, то текст будет прорисован в `x - (width / 2)`.

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

ctx.textAlign = "left" || "right" || "center" || "start" || "end";
```

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

`left`

Выравнивание текста по левому краю.

`right`

Выравнивание текста по правому краю.

`center`

Текст отцентрирован.

`start`

Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).

`end`

Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево

По умолчанию значение `textAlign` установлено как "start".

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

### Использование значения `textAlign`

Довольно простой сниппет использования значения `textAlign` для изменения выравнивания текста.

#### HTML

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

#### JavaScript

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

ctx.font = "48px serif";
ctx.textAlign = "left";
ctx.strokeText("Hello world", 0, 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.textAlign = 'left';
ctx.strokeText('Hello world', 0, 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-textalign-dev |

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

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

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

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


CanvasRenderingContext2D.fill() - Интерфейсы веб API

CanvasRenderingContext2D.fill()
===============================

**`CanvasRenderingContext2D.fill()`** метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или чётно-нечётное.

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

void ctx.fill([fillRule]);
void ctx.fill(path[, fillRule]);
```

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

`fillRule`

 Выбор алгоритма заливки фигуры
 Возможные значения:

`nonzero`

Правило ненулевого индекса, значение по умолчанию

`evenodd`

Чётно-нечётное правило

`path`

`Path2D` (en-US) путь для заливки.

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

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

Это всего лишь простой фрагмент кода, который использует метод `fill` для заполнения пути.

#### HTML

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

#### JavaScript

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

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

<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.rect(10, 10, 100, 100);
ctx.fill();</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-fill-dev |

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

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

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

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


CanvasRenderingContext2D.lineJoin - Интерфейсы веб API

CanvasRenderingContext2D.lineJoin
=================================

Свойство **`CanvasRenderingContext2D.lineJoin`** предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.

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

**Примечание:** Lines can be drawn with the `stroke()`, `strokeRect()`, and `strokeText()` methods.

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

ctx.lineJoin = "bevel" || "round" || "miter";
```

### Значения

Свойство может принимать три значения: `round`, `bevel` и `miter`. По умолчанию установлено значение `miter`. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.

![](/ru/docs/Web/API/CanvasRenderingContext2D/lineJoin/canvas_linejoin.png)

`round`

Скругляет углы за счёт добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.

`bevel`

"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.

`miter`

Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством `miterLimit`.

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

### Использование свойства lineJoin

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

#### HTML

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

#### JavaScript

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

ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();
```

#### Result

### Разница между значениями lineJoin

Пример ниже наглядно демонстрирует разницу между значениями свойства `lineJoin.`
```

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

```js
var ctx = document.getElementById("canvas").getContext("2d");
var lineJoin = ["round", "bevel", "miter"];
ctx.lineWidth = 10;

for (let i = 0; i < lineJoin.length; i++) {
  ctx.lineJoin = lineJoin[i];
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i \* 40);
  ctx.lineTo(35, 45 + i \* 40);
  ctx.lineTo(75, 5 + i \* 40);
  ctx.lineTo(115, 45 + i \* 40);
  ctx.lineTo(155, 5 + i \* 40);
  ctx.stroke();
}
```

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

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

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

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

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

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

* Интерфейс, предоставляющий данное свойство: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineCap`
* `CanvasRenderingContext2D.lineWidth`


CanvasRenderingContext2D.lineCap - Интерфейсы веб API

CanvasRenderingContext2D.lineCap
================================

Свойство **`CanvasRenderingContext2D.lineCap`** предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий.

**Примечание:** Линии могут быть нарисованы с помощью методов `stroke()`, `strokeRect()`, и `strokeText()` methods.

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

ctx.lineCap = "butt" || "round" || "square";
```

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

`butt`

Концы линий прямые.

`round`

Концы линий скруглённые.

`square`

Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.

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

### Использование свойства lineCap

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

#### HTML

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

#### JavaScript

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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
```

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

### Разница между значениями lineCap

В примере нарисованы три линии с разными значениями `lineCap`. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.

Левая линия будет использовать значение lineCap `"butt"`. Она не будет выходить за направляющие. Средняя линия будет нарисована со значением lineCap `"round"`. За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение `"square"`. Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.
```

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

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const lineCap = ["butt", "round", "square"];

// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = "black";
for (let i = 0; i < lineCap.length; i++) {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap[i];
  ctx.beginPath();
  ctx.moveTo(25 + i \* 50, 10);
  ctx.lineTo(25 + i \* 50, 140);
  ctx.stroke();
}
```

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

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

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

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

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

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

* Интерфейс, предоставляющий данное свойство `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineWidth`
* `CanvasRenderingContext2D.lineJoin`


CanvasRenderingContext2D.clearRect() - Интерфейсы веб API

CanvasRenderingContext2D.clearRect()
====================================

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

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

void ctx.clearRect(x, y, width, height);
```

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

`x`

Координата начальной точки прямоугольника по оси x.

`y`

Координата начальной точки прямоугольника по оси y.

`width`

Ширина прямоугольника.

`height`

Высота прямоугольника.

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

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

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

#### HTML

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

#### JavaScript

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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.lineTo(120, 120);
ctx.closePath(); // рисует последнюю линию треугольника
ctx.stroke();

ctx.clearRect(10, 10, 100, 100);

// очистить весь холст
// ctx.clearRect(0, 0, canvas.width, canvas.height);
```

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

<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:140px;">
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath(); // рисует последнюю линию треугольника
ctx.stroke();

ctx.clearRect(10, 10, 100, 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-clearrect-dev |

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

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

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

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