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

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

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

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

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

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

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

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

**`KeyboardEvent.altKey`** свойство только для чтения, возвращает `Boolean`, если клавиша `alt` (`Option` или `⌥` на OS X) была нажата (`true`) или не нажата (`false`), когда событие произошло.

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

var altKeyPressed = instanceOfKeyboardEvent.altKey
```

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


```js
<html>
<head>
<title>altKey example</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Нажата клавиша: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "клавиша ALT нажата: " + e.altKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>
Нажмите любую клавишу с зажатой клавишей ALT или без неё<br />
Вы можете также использовать SHIFT вместе с ALT.
</p>
</body>
</html>
```

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

| Specification |
| --- |
| UI Events # dom-keyboardevent-altkey |

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

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

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

* `KeyboardEvent`
CSSStyleDeclaration.getPropertyValue()
======================================

**CSSStyleDeclaration.getPropertyValue()** интерфейс метода, который возвращает `DOMString`, указанного CSS-свойства.

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

var value = style.getPropertyValue(property);
```

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

* *`property`* - это `DOMString` представляющий имя свойства, которое должно быть обработано.
### Возвращаемое значение

* `value` - это `DOMString` содержащий значение свойства. Если не задано, возвращается пустая строка.
Пример
------

Следующий JavaScript-код проверяет отмечен ли margin как important в CSS-правиле селектора:


```js
var declaration = document.styleSheets[0].rules[0].style;
var value = declaration.getPropertyValue("margin"); // "1px 2px"
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertyvalue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BackgroundFetchUpdateUIEvent()
==============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Конструктор **`BackgroundFetchUpdateUIEvent()`** создаёт новый объект `BackgroundFetchUpdateUIEvent`. Этот конструктор обычно не используется, так как браузер сам создаёт эти объекты и предоставляет их для колбэков фонового запроса.

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


```js
new BackgroundFetchEvent(type, options)
```

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

`type`

 Строка с именем события.
 Эта строка чувствительна к регистру и браузеры устанавливают её значение в `backgroundfetchsuccess` или `backgroundfetchfail`.


`options`

Объект, который , *в дополнение к свойствам, определённым в`ExtendableEvent()` (en-US)*, имеет следующие свойства:

`registration`

Объект `BackgroundFetchRegistration`.


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

Новый объект `BackgroundFetchUpdateUIEvent`.

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchupdateuievent-backgroundfetchupdateuievent |

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

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