CanvasRenderingContext2D

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

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

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

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

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() Это экспериментальное API, которое не должно использоваться в рабочем коде.
Добавляет к контуру эллипс, с центром в точке (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.currentTransform
Текущая матрица преобразований (SVGMatrix (en-US) object).
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) Это экспериментальное API, которое не должно использоваться в рабочем коде.
Переустанавливает текущую матрицу преобразований в единичную матрицу.

Композиция

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) Это экспериментальное API, которое не должно использоваться в рабочем коде.
Режим сглаживания изображений; если отключён, изображения не будут сглаживаться при масштабировании.

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

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

CanvasRenderingContext2D.save()
Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесённые в него изменения с помощью метода restore().
CanvasRenderingContext2D.restore()
Восстанавливает состояние стилей рисования в значение, сохранённое методом save() в стек состояний последним.
CanvasRenderingContext2D.canvas
Доступная только для чтения обратная ссылка на HTMLCanvasElement. Может иметь значение null, если она не связана с элементом <canvas>.

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

CanvasRenderingContext2D.addHitRegion() (en-US) Это экспериментальное API, которое не должно использоваться в рабочем коде.
Добавляет область попадания к холсту.
CanvasRenderingContext2D.removeHitRegion() (en-US) Это экспериментальное API, которое не должно использоваться в рабочем коде.
Удаляет область попадания с указанным id с холста.
CanvasRenderingContext2D.clearHitRegions() (en-US) Это экспериментальное API, которое не должно использоваться в рабочем коде.
Удаляет все области попадания с холста.

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

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

Это API не было стандартизировано. CanvasRenderingContext2D.clearShadow()
Удаляет все настройки теней, такие как CanvasRenderingContext2D.shadowColor (en-US) и CanvasRenderingContext2D.shadowBlur (en-US).
Это API не было стандартизировано. CanvasRenderingContext2D.drawImageFromRect()
This is redundant with an equivalent overload of drawImage.
Это API не было стандартизировано. CanvasRenderingContext2D.setAlpha()
Вместо этого метода следует использовать CanvasRenderingContext2D.globalAlpha.
Это API не было стандартизировано. CanvasRenderingContext2D.setCompositeOperation()
Вместо этого метода следует использовать CanvasRenderingContext2D.globalCompositeOperation (en-US).
Это API не было стандартизировано. CanvasRenderingContext2D.setLineWidth()
Вместо этого метода следует использовать CanvasRenderingContext2D.lineWidth.
Это API не было стандартизировано. CanvasRenderingContext2D.setLineJoin()
Вместо этого метода следует использовать CanvasRenderingContext2D.lineJoin.
Это API не было стандартизировано. CanvasRenderingContext2D.setLineCap()
Вместо этого метода следует использовать CanvasRenderingContext2D.lineCap.
Это API не было стандартизировано. CanvasRenderingContext2D.setMiterLimit()
Вместо этого метода следует использовать CanvasRenderingContext2D.miterLimit.
Это API не было стандартизировано. CanvasRenderingContext2D.setStrokeColor()
Вместо этого метода следует использовать CanvasRenderingContext2D.strokeStyle.
Это API не было стандартизировано. CanvasRenderingContext2D.setFillColor()
Вместо этого метода следует использовать CanvasRenderingContext2D.fillStyle.
Это API не было стандартизировано. CanvasRenderingContext2D.setShadow()
Вместо этого метода следует использовать CanvasRenderingContext2D.shadowColor (en-US) и CanvasRenderingContext2D.shadowBlur (en-US).
Это API не было стандартизировано. CanvasRenderingContext2D.webkitLineDash
Вместо этого свойства следует использовать CanvasRenderingContext2D.getLineDash() и CanvasRenderingContext2D.setLineDash() (en-US).
Это API не было стандартизировано. CanvasRenderingContext2D.webkitLineDashOffset
Вместо этого свойства следует использовать CanvasRenderingContext2D.lineDashOffset.
Это API не было стандартизировано. CanvasRenderingContext2D.webkitImageSmoothingEnabled
Вместо этого свойства следует использовать CanvasRenderingContext2D.imageSmoothingEnabled (en-US).
Это API не было стандартизировано. CanvasRenderingContext2D.getContextAttributes()
По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает объект Canvas2DContextAttributes, который содержит атрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и атрибут "alpha" (true по умолчанию), показывающий используется ли прозрачность на холсте.
Это API не было стандартизировано. CanvasRenderingContext2D.isContextLost()
По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает true если контекст canvas был потерян, иначе false.

Только WebKit

Это API не было стандартизировано. CanvasRenderingContext2D.webkitBackingStorePixelRatio
Размер хранилища по отношению к элементу canvas. Смотри High DPI Canvas.
Это API не было стандартизировано. CanvasRenderingContext2D.webkitGetImageDataHD
Предназначался для HD хранилищ, но удалён из спецификации canvas.
Это API не было стандартизировано. CanvasRenderingContext2D.webkitPutImageDataHD
Предназначался для HD хранилищ, но удалён из спецификации canvas.

Только Gecko

Это API не было стандартизировано. CanvasRenderingContext2D.filter (en-US)
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.

Prefixed APIs

Это API не было стандартизировано. CanvasRenderingContext2D.mozCurrentTransform
Sets or gets the current transformation matrix, see CanvasRenderingContext2D.currentTransform
Это API не было стандартизировано. CanvasRenderingContext2D.mozCurrentTransformInverse
Sets or gets the current inversed transformation matrix. 
Это API не было стандартизировано. CanvasRenderingContext2D.mozFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).
Это API не было стандартизировано. CanvasRenderingContext2D.mozImageSmoothingEnabled
See CanvasRenderingContext2D.imageSmoothingEnabled (en-US).
Это API не было стандартизировано. Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. CanvasRenderingContext2D.mozDash
An array which specifies the lengths of alternating dashes and gaps . Use CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() (en-US) instead.
Это API не было стандартизировано. Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. CanvasRenderingContext2D.mozDashOffset
Specifies where to start a dash array on a line. . Use CanvasRenderingContext2D.lineDashOffset instead.
Это API не было стандартизировано. Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. CanvasRenderingContext2D.mozTextStyle
Introduced in in Gecko 1.9, deprecated in favor of the CanvasRenderingContext2D.font property.
Это API не было стандартизировано. Этот API вышел из употребления и его работа больше не гарантируется. 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.
Это API не было стандартизировано. Этот API вышел из употребления и его работа больше не гарантируется. CanvasRenderingContext2D.mozMeasureText()
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() instead.
Это API не было стандартизировано. Этот API вышел из употребления и его работа больше не гарантируется. CanvasRenderingContext2D.mozPathText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
Это API не было стандартизировано. Этот API вышел из употребления и его работа больше не гарантируется. CanvasRenderingContext2D.mozTextAlongPath()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Internal APIs (chrome-context only)

Это API не было стандартизировано. CanvasRenderingContext2D.asyncDrawXULElement()
Renders a region of a XUL element into the canvas.
Это API не было стандартизировано. 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.
Это API не было стандартизировано. 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

Это API не было стандартизировано. CanvasRenderingContext2D.msFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).

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

Спецификация Статус Комментарии
HTML Living Standard
Определение 'CanvasRenderingContext2D' в этой спецификации.
Живой стандарт  

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1 1.5 (1.8) 9 9 2
Возможность Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? ? ? ? ?

Примечания о совместимости

  • Начиная с Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), указание недопустимых значений для следующих методов и свойств молча игнорируется: translate(), transform(), rotate(), scale(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo(), arc(), shadowOffsetX, shadowOffsetYshadowBlur.

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