CanvasRenderingContext2D
========================

Интерфейс **`CanvasRenderingContext2D`** предоставляет контекст 2D рендеринга для поверхности рисования элемента `<canvas>`.

Для того, чтобы получить объект этого интерфейса, следует вызвать метод `getContext()` объекта `<canvas>`, передав ему в качестве первого аргумента строку "2d":


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


После того, как получен контекст 2D рендеринга для элемента canvas, вы можете начать работу с ним. Например:


```js
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
```


Свойства и методы контекста 2D рендеринга представлены на боковой панели и далее по тексту. Кроме того, в руководстве по canvas содержится больше информации, примеров и ссылок на ресурсы по этой теме.

Рисование прямоугольников
-------------------------

Существует три метода, которые сразу же рисуют прямоугольники на холсте.

`CanvasRenderingContext2D.clearRect()`

Для всех пикселей, находящихся внутри прямоугольника, определённого начальной точкой *(x, y)* и размерами *(ширина, высота),* устанавливает чёрный прозрачный цвет, стирая любое ранее нарисованное содержимое.

`CanvasRenderingContext2D.fillRect()`

Рисует залитый прямоугольник в позиции *(x, y)*, размеры которого определяются шириной *width* и высотой *height*.

`CanvasRenderingContext2D.strokeRect()`

Рисует на холсте прямоугольник с начальной точкой в позиции *(x, y)*, имеющий ширину *w* и высоту *h*, используя текущий стиль обводки.

Рисование текста
----------------

Следующие методы позволяют создать текст. Смотрите также информацию об объекте `TextMetrics` (en-US), хранящем свойства текста.

`CanvasRenderingContext2D.fillText()`

Рисует (заливает) заданный текст в заданной позиции (x,y).

`CanvasRenderingContext2D.strokeText()`

Рисует обводку заданного текста в заданной позиции *(x, y)*.

`CanvasRenderingContext2D.measureText()`

Возвращает объект `TextMetrics` (en-US).

Стили линий
-----------

Следующие методы и свойства определяют как будут отрисовываться линии.

`CanvasRenderingContext2D.lineWidth`

Ширина линий. По умолчанию `1.0`

`CanvasRenderingContext2D.lineCap`

Форма концов линий. Возможные значения: `butt` (по умолчанию), `round`, `square`.

`CanvasRenderingContext2D.lineJoin`

Определяет форму вершин, в которых две линии сходятся. Возможные значения: `round`, `bevel`, `miter` (по умолчанию).

`CanvasRenderingContext2D.miterLimit`

Ограничение длины сопряжений. По умолчанию `10`.

`CanvasRenderingContext2D.getLineDash()`

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

`CanvasRenderingContext2D.setLineDash()` (en-US)

Устанавливает текущий паттерн штриховой линии.

`CanvasRenderingContext2D.lineDashOffset`

Указывает с какого места начать штриховку линии.

Стили текста
------------

Следующие свойства контролируют отображение текста.

`CanvasRenderingContext2D.font`

Настройки шрифта. Значение по умолчанию: `10px sans-serif`.

`CanvasRenderingContext2D.textAlign`

Определяет выравнивание текста по горизонтали. Возможные значения: `start` (по умолчанию), `end`, `left`, `right` или `center`.

`CanvasRenderingContext2D.textBaseline`

Определяет выравнивание текста относительно базовой линии. Возможные значения: `top`, `hanging`, `middle`, `alphabetic` (по умолчанию), `ideographic`, `bottom`.

`CanvasRenderingContext2D.direction` (en-US)

Направление текста. Возможные значения: `ltr, rtl`, `inherit` (по умолчанию).

Стили заливки и обводки
-----------------------

Стили заливки применяются к цветам и стилям внутри форм, а стили обводки применяются к линиям вокруг форм.

`CanvasRenderingContext2D.fillStyle`

Цвет или стиль применяемый внутри форм. По умолчанию #000 (чёрный).

`CanvasRenderingContext2D.strokeStyle`

Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (чёрный).

Градиенты и шаблоны
-------------------

`CanvasRenderingContext2D.createLinearGradient()`

Создаёт линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.

`CanvasRenderingContext2D.createRadialGradient()` (en-US)

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

`CanvasRenderingContext2D.createPattern()` (en-US)

Создаёт шаблон, используя указанное изображение (`CanvasImageSource` (en-US)). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает `CanvasPattern`.

Тени
----

`CanvasRenderingContext2D.shadowBlur` (en-US)

Устанавливает эффект размытия. По умолчанию `0`

`CanvasRenderingContext2D.shadowColor` (en-US)

Цвет тени. По умолчанию полностью прозрачный чёрный.

`CanvasRenderingContext2D.shadowOffsetX` (en-US)

Горизонтальное смещение тени. По умолчанию 0.

`CanvasRenderingContext2D.shadowOffsetY` (en-US)

Вертикальное смещение тени. По умолчанию 0.

Контуры
-------

Следующие методы могут быть использованы для манипулирования контурами объектов.

`CanvasRenderingContext2D.beginPath()`

Создаёт новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.

`CanvasRenderingContext2D.closePath()`

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

`CanvasRenderingContext2D.moveTo()`

Перемещает начальную точку нового фрагмента контура в точку с координатами **(x, y)**.

`CanvasRenderingContext2D.lineTo()`

Соединяет последнюю точку фрагмента контура и точку с координатами `(x,y)` прямой линией.

`CanvasRenderingContext2D.bezierCurveTo()`

Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.

`CanvasRenderingContext2D.quadraticCurveTo()` (en-US)

Добавляет квадратичную кривую Безье к текущему контуру.

`CanvasRenderingContext2D.arc()`

Добавляет к контуру дугу, с центром в точке *(x, y)*, радиусом *r,* имеющую угол начала *startAngle* и конца *endAngle*, рисующуюся в направлении, заданном в аргументе *anticlockwise* (по умолчанию - по часовой стрелке).

`CanvasRenderingContext2D.arcTo()`

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

`CanvasRenderingContext2D.ellipse()` 
Экспериментальная возможность

Добавляет к контуру эллипс, с центром в точке *(x, y)*, заданный радиусами *radiusX* и *radiusY*, имеющий угол начала *startAngle* и конца *endAngle*, рисующийся в направлении, заданном в аргументе *anticlockwise* (по умолчанию - по часовой стрелке).

`CanvasRenderingContext2D.rect()`

Создаёт контур прямоугольника с началом в точке *(x, y)*, и размерами, заданными шириной *width* и высотой *height*.

Рисование контуров
------------------

`CanvasRenderingContext2D.fill()`

Заливает фрагменты контура текущей заливкой.

`CanvasRenderingContext2D.stroke()`

Выполняет обводку фрагментов контура текущей обводкой.

`CanvasRenderingContext2D.drawFocusIfNeeded()` (en-US)

Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.

`CanvasRenderingContext2D.scrollPathIntoView()` (en-US)

Прокручивает текущий или заданный контур в видимую область окна браузера.

`CanvasRenderingContext2D.clip()` (en-US)

Создаёт область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода `clip()` применяется только внутри области отсечения. Пример использования см. в разделе Области отсечения руководства по Canvas.

`CanvasRenderingContext2D.isPointInPath()` (en-US)

Позволяет узнать, содержится ли указанная точка в текущем контуре.

`CanvasRenderingContext2D.isPointInStroke()` (en-US)

Позволяет узнать, находится ли указанная точка на обводке контура.

Трансформации
-------------

Объекты в контексте рендеринга `CanvasRenderingContext2D` имеют текущую матрицу преобразований и методы для управления ей. Матрица преобразований применяется в момент создания текущего контура по умолчанию, рисования текста, форм и объектов `Path2D` (en-US). Методы, перечисленные ниже, остаются по историческим причинам и из соображений совместимости, в то время как в настоящее время в большинстве разделов API используются объекты `SVGMatrix` (en-US), которые будут использоваться в будущем как замена устаревшим методам.

`CanvasRenderingContext2D.rotate()`

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

`CanvasRenderingContext2D.scale()` (en-US)

Добавляет к элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.

`CanvasRenderingContext2D.translate()` (en-US)

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

`CanvasRenderingContext2D.transform()` (en-US)

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

`CanvasRenderingContext2D.setTransform()` (en-US)

Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает метод `transform()` с теми же аргументами.

`CanvasRenderingContext2D.resetTransform()` (en-US) 
Экспериментальная возможность

Переустанавливает текущую матрицу преобразований в единичную матрицу.

Композиция
----------

`CanvasRenderingContext2D.globalAlpha`

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

`CanvasRenderingContext2D.globalCompositeOperation` (en-US)

Совместно с применённым `globalAlpha` это свойство определяет как формы и изображения накладываются на существующее изображение.

Рисование изображений
---------------------

`CanvasRenderingContext2D.drawImage()`

Рисует заданное изображение. У этого метода есть несколько различных форматов вызова, что обеспечивает большую гибкость в его использовании.

Манипулирование пикселями
-------------------------

Смотрите также объект `ImageData`.

`CanvasRenderingContext2D.createImageData()` (en-US)

Создаёт новый пустой объект `ImageData` с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный чёрный.

`CanvasRenderingContext2D.getImageData()`

Возвращает объект `ImageData`, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной *sw* и высотой *sh*, начальная точка которого находится в позиции *(sx, sy)*.

`CanvasRenderingContext2D.putImageData()`

Переносит данные, заданные в объекте `ImageData`, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы будут только пикселы из этой области.

Сглаживание изображений
-----------------------

`CanvasRenderingContext2D.imageSmoothingEnabled` (en-US) 
Экспериментальная возможность

Режим сглаживания изображений; если отключён, изображения не будут сглаживаться при масштабировании.

Состояние холста
----------------

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

`CanvasRenderingContext2D.save()`

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

`CanvasRenderingContext2D.restore()`

Восстанавливает состояние стилей рисования в значение, сохранённое методом `save()` в стек состояний последним.

`CanvasRenderingContext2D.canvas`

Доступная только для чтения обратная ссылка на `HTMLCanvasElement`. Может иметь значение `null`, если она не связана с элементом `<canvas>`.

Области попадания
-----------------

`CanvasRenderingContext2D.addHitRegion()` 
Экспериментальная возможность

Добавляет область попадания к холсту.

`CanvasRenderingContext2D.removeHitRegion()` 
Экспериментальная возможность

Удаляет область попадания с указанным `id` с холста.

`CanvasRenderingContext2D.clearHitRegions()` 
Экспериментальная возможность

Удаляет все области попадания с холста.

Нестандартные API
-----------------

### Blink и WebKit

Большинство из этих API являются запрещёнными и будут удалены в будущем.

Non-standard `CanvasRenderingContext2D.clearShadow()`

Удаляет все настройки теней, такие как `CanvasRenderingContext2D.shadowColor` (en-US) и `CanvasRenderingContext2D.shadowBlur` (en-US).

Non-standard `CanvasRenderingContext2D.drawImageFromRect()`

This is redundant with an equivalent overload of `drawImage`.

Non-standard `CanvasRenderingContext2D.setAlpha()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.globalAlpha`.

Non-standard `CanvasRenderingContext2D.setCompositeOperation()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.globalCompositeOperation` (en-US).

Non-standard `CanvasRenderingContext2D.setLineWidth()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.lineWidth`.

Non-standard `CanvasRenderingContext2D.setLineJoin()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.lineJoin`.

Non-standard `CanvasRenderingContext2D.setLineCap()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.lineCap`.

Non-standard `CanvasRenderingContext2D.setMiterLimit()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.miterLimit`.

Non-standard `CanvasRenderingContext2D.setStrokeColor()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.strokeStyle`.

Non-standard `CanvasRenderingContext2D.setFillColor()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.fillStyle`.

Non-standard `CanvasRenderingContext2D.setShadow()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.shadowColor` (en-US) и `CanvasRenderingContext2D.shadowBlur` (en-US).

Non-standard `CanvasRenderingContext2D.webkitLineDash`

Вместо этого свойства следует использовать `CanvasRenderingContext2D.getLineDash()` и `CanvasRenderingContext2D.setLineDash()` (en-US).

Non-standard `CanvasRenderingContext2D.webkitLineDashOffset`

Вместо этого свойства следует использовать `CanvasRenderingContext2D.lineDashOffset`.

Non-standard `CanvasRenderingContext2D.webkitImageSmoothingEnabled`

Вместо этого свойства следует использовать `CanvasRenderingContext2D.imageSmoothingEnabled` (en-US).

### Только Blink

Non-standard `CanvasRenderingContext2D.getContextAttributes()`

По аналогии с аналогичным методом класса `WebGLRenderingContext`, возвращает объект `Canvas2DContextAttributes`, который содержит атрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и атрибут "alpha" (`true` по умолчанию), показывающий используется ли прозрачность на холсте.

Non-standard `CanvasRenderingContext2D.isContextLost()`

По аналогии с аналогичным методом класса `WebGLRenderingContext`, возвращает `true` если контекст canvas был потерян, `иначе false`.

### Только WebKit

Non-standard `CanvasRenderingContext2D.webkitBackingStorePixelRatio`

Размер хранилища по отношению к элементу canvas. Смотри High DPI Canvas.

Non-standard `CanvasRenderingContext2D.webkitGetImageDataHD`

Предназначался для HD хранилищ, но удалён из спецификации canvas.

Non-standard `CanvasRenderingContext2D.webkitPutImageDataHD`

Предназначался для HD хранилищ, но удалён из спецификации canvas.

### Только Gecko

Non-standard `CanvasRenderingContext2D.filter` (en-US)

CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.

#### Prefixed APIs

Non-standard `CanvasRenderingContext2D.mozFillRule`

The fill rule to use. This must be one of `evenodd` or `nonzero` (default).

Non-standard `CanvasRenderingContext2D.mozImageSmoothingEnabled`

See `CanvasRenderingContext2D.imageSmoothingEnabled` (en-US).

Non-standard 
Устарело
 `CanvasRenderingContext2D.mozDash`

An array which specifies the lengths of alternating dashes and gaps. Use `CanvasRenderingContext2D.getLineDash()` and `CanvasRenderingContext2D.setLineDash()` (en-US) instead.

Non-standard 
Устарело
 `CanvasRenderingContext2D.mozDashOffset`

Specifies where to start a dash array on a line. Use `CanvasRenderingContext2D.lineDashOffset` instead.

Non-standard 
Устарело
 `CanvasRenderingContext2D.mozTextStyle`

Introduced in in Gecko 1.9, deprecated in favor of the `CanvasRenderingContext2D.font` property.

Non-standard `CanvasRenderingContext2D.mozDrawText()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use `CanvasRenderingContext2D.strokeText()` or `CanvasRenderingContext2D.fillText()` instead.

Non-standard `CanvasRenderingContext2D.mozMeasureText()`

This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use `CanvasRenderingContext2D.measureText()` instead.

Non-standard `CanvasRenderingContext2D.mozPathText()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Non-standard `CanvasRenderingContext2D.mozTextAlongPath()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

#### Internal APIs (chrome-context only)

Non-standard `CanvasRenderingContext2D.asyncDrawXULElement()`

Renders a region of a XUL element into the `canvas`.

Non-standard `CanvasRenderingContext2D.drawWindow()` (en-US)

Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.

Non-standard `CanvasRenderingContext2D.demote()`

This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.

### Internet Explorer

Non-standard `CanvasRenderingContext2D.msFillRule`

The fill rule to use. This must be one of `evenodd` or `nonzero` (default).

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

| Specification |
| --- |
| HTML Standard # 2dcontext |

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

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

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

* `HTMLCanvasElement`