recursal/MDN huggingface dataset:
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()
===============================

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

Метод **`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()
===============================================

Метод **`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()
=================================

Метод **`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()
==================================

Метод **`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
==================================

`Свойство 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
=====================================

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

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

Метод **`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
===================================

Свойство **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`