This page was translated from English by the community.Learn more and join the MDN Web Docs community.

View in EnglishAlways switch to English

CanvasRenderingContext2D

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

Интерфейс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, хранящем свойства текста.

CanvasRenderingContext2D.fillText(): Рисует (заливает) заданный текст в заданной позиции (x,y).
CanvasRenderingContext2D.strokeText(): Рисует обводку заданного текста в заданной позиции(x, y).
CanvasRenderingContext2D.measureText(): Возвращает объектTextMetrics.

Стили линий

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

CanvasRenderingContext2D.lineWidth: Ширина линий. По умолчанию1.0
CanvasRenderingContext2D.lineCap: Форма концов линий. Возможные значения:butt (по умолчанию),round,square.
CanvasRenderingContext2D.lineJoin: Определяет форму вершин, в которых две линии сходятся. Возможные значения:round,bevel,miter (по умолчанию).
CanvasRenderingContext2D.miterLimit: Ограничение длины сопряжений. По умолчанию10.
CanvasRenderingContext2D.getLineDash(): Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из чётного количества неотрицательных чисел.
CanvasRenderingContext2D.setLineDash(): Устанавливает текущий паттерн штриховой линии.
CanvasRenderingContext2D.lineDashOffset: Указывает с какого места начать штриховку линии.

Стили текста

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

CanvasRenderingContext2D.font: Настройки шрифта. Значение по умолчанию:10px sans-serif.
CanvasRenderingContext2D.textAlign: Определяет выравнивание текста по горизонтали. Возможные значения:start (по умолчанию),end,left,right илиcenter.
CanvasRenderingContext2D.textBaseline: Определяет выравнивание текста относительно базовой линии. Возможные значения:top,hanging,middle,alphabetic (по умолчанию),ideographic,bottom.
CanvasRenderingContext2D.direction: Направление текста. Возможные значения:ltr, rtl,inherit (по умолчанию).

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

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

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

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

CanvasRenderingContext2D.createLinearGradient(): Создаёт линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.
CanvasRenderingContext2D.createRadialGradient(): Создаёт радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.
CanvasRenderingContext2D.createPattern(): Создаёт шаблон, используя указанное изображение (CanvasImageSource). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращаетCanvasPattern.

Тени

CanvasRenderingContext2D.shadowBlur: Устанавливает эффект размытия. По умолчанию0
CanvasRenderingContext2D.shadowColor: Цвет тени. По умолчанию полностью прозрачный чёрный.
CanvasRenderingContext2D.shadowOffsetX: Горизонтальное смещение тени. По умолчанию 0.
CanvasRenderingContext2D.shadowOffsetY: Вертикальное смещение тени. По умолчанию 0.

Контуры

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

CanvasRenderingContext2D.beginPath(): Создаёт новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.
CanvasRenderingContext2D.closePath(): Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.
CanvasRenderingContext2D.moveTo(): Перемещает начальную точку нового фрагмента контура в точку с координатами(x, y).
CanvasRenderingContext2D.lineTo(): Соединяет последнюю точку фрагмента контура и точку с координатами(x,y) прямой линией.
CanvasRenderingContext2D.bezierCurveTo(): Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.
CanvasRenderingContext2D.quadraticCurveTo(): Добавляет квадратичную кривую Безье к текущему контуру.
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(): Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.
CanvasRenderingContext2D.scrollPathIntoView(): Прокручивает текущий или заданный контур в видимую область окна браузера.
CanvasRenderingContext2D.clip(): Создаёт область отсечения из текущих фрагментов контура. Все что рисуется после вызова методаclip() применяется только внутри области отсечения. Пример использования см. в разделеОбласти отсечения руководства по Canvas.
CanvasRenderingContext2D.isPointInPath(): Позволяет узнать, содержится ли указанная точка в текущем контуре.
CanvasRenderingContext2D.isPointInStroke(): Позволяет узнать, находится ли указанная точка на обводке контура.

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

CanvasRenderingContext2D.rotate(): Добавляет вращение в матрицу преобразований. Аргумент представляет угол вращения по часовой стрелке, выраженный в радианах.
CanvasRenderingContext2D.scale(): Добавляет к элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.
CanvasRenderingContext2D.translate(): Добавляет трансформацию перемещения, перемещая начальную точку системы координат холста на x по горизонтали и y по вертикали.
CanvasRenderingContext2D.transform(): Управляет текущей матрицей преобразований при помощи матрицы, описанной аргументами, переданными в метод.
CanvasRenderingContext2D.setTransform(): Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает методtransform() с теми же аргументами.
CanvasRenderingContext2D.resetTransform()Экспериментальная возможность: Переустанавливает текущую матрицу преобразований в единичную матрицу.

Композиция

CanvasRenderingContext2D.globalAlpha: Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию1.0 (полностью непрозрачный).
CanvasRenderingContext2D.globalCompositeOperation: Совместно с применённымglobalAlpha это свойство определяет как формы и изображения накладываются на существующее изображение.

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

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

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

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

CanvasRenderingContext2D.createImageData(): Создаёт новый пустой объектImageData с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный чёрный.
CanvasRenderingContext2D.getImageData(): Возвращает объектImageData, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длинойsw и высотойsh, начальная точка которого находится в позиции(sx, sy).
CanvasRenderingContext2D.putImageData(): Переносит данные, заданные в объектеImageData, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы будут только пикселы из этой области.

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

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

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

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

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

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

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

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

Blink и WebKit

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

Не стандартноCanvasRenderingContext2D.clearShadow(): Удаляет все настройки теней, такие какCanvasRenderingContext2D.shadowColor иCanvasRenderingContext2D.shadowBlur.
Не стандартноCanvasRenderingContext2D.drawImageFromRect(): This is redundant with an equivalent overload ofdrawImage.
Не стандартноCanvasRenderingContext2D.setAlpha(): Вместо этого метода следует использоватьCanvasRenderingContext2D.globalAlpha.
Не стандартноCanvasRenderingContext2D.setCompositeOperation(): Вместо этого метода следует использоватьCanvasRenderingContext2D.globalCompositeOperation.
Не стандартноCanvasRenderingContext2D.setLineWidth(): Вместо этого метода следует использоватьCanvasRenderingContext2D.lineWidth.
Не стандартноCanvasRenderingContext2D.setLineJoin(): Вместо этого метода следует использоватьCanvasRenderingContext2D.lineJoin.
Не стандартноCanvasRenderingContext2D.setLineCap(): Вместо этого метода следует использоватьCanvasRenderingContext2D.lineCap.
Не стандартноCanvasRenderingContext2D.setMiterLimit(): Вместо этого метода следует использоватьCanvasRenderingContext2D.miterLimit.
Не стандартноCanvasRenderingContext2D.setStrokeColor(): Вместо этого метода следует использоватьCanvasRenderingContext2D.strokeStyle.
Не стандартноCanvasRenderingContext2D.setFillColor(): Вместо этого метода следует использоватьCanvasRenderingContext2D.fillStyle.
Не стандартноCanvasRenderingContext2D.setShadow(): Вместо этого метода следует использоватьCanvasRenderingContext2D.shadowColor иCanvasRenderingContext2D.shadowBlur.
Не стандартноCanvasRenderingContext2D.webkitLineDash: Вместо этого свойства следует использоватьCanvasRenderingContext2D.getLineDash() иCanvasRenderingContext2D.setLineDash().
Не стандартноCanvasRenderingContext2D.webkitLineDashOffset: Вместо этого свойства следует использоватьCanvasRenderingContext2D.lineDashOffset.
Не стандартноCanvasRenderingContext2D.webkitImageSmoothingEnabled: Вместо этого свойства следует использоватьCanvasRenderingContext2D.imageSmoothingEnabled.

Только Blink

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

Только WebKit

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

Только Gecko

Не стандартно CanvasRenderingContext2D.filter: CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.

Prefixed APIs

Не стандартноCanvasRenderingContext2D.mozFillRule: Thefill rule to use. This must be one ofevenodd ornonzero (default).
Не стандартноCanvasRenderingContext2D.mozImageSmoothingEnabled: SeeCanvasRenderingContext2D.imageSmoothingEnabled.
Не стандартно УстарелоCanvasRenderingContext2D.mozDash: An array which specifies the lengths of alternating dashes and gaps. UseCanvasRenderingContext2D.getLineDash() andCanvasRenderingContext2D.setLineDash() instead.
Не стандартно УстарелоCanvasRenderingContext2D.mozDashOffset: Specifies where to start a dash array on a line. UseCanvasRenderingContext2D.lineDashOffset instead.
Не стандартно УстарелоCanvasRenderingContext2D.mozTextStyle: Introduced in in Gecko 1.9, deprecated in favor of theCanvasRenderingContext2D.font property.
Не стандартноCanvasRenderingContext2D.mozDrawText(): This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. UseCanvasRenderingContext2D.strokeText() orCanvasRenderingContext2D.fillText() instead.
Не стандартноCanvasRenderingContext2D.mozMeasureText(): This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. UseCanvasRenderingContext2D.measureText() instead.
Не стандартноCanvasRenderingContext2D.mozPathText(): This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
Не стандартноCanvasRenderingContext2D.mozTextAlongPath(): This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Internal APIs (chrome-context only)

Не стандартно CanvasRenderingContext2D.asyncDrawXULElement(): Renders a region of a XUL element into thecanvas.
Не стандартно CanvasRenderingContext2D.drawWindow(): Renders a region of a window into thecanvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
Не стандартно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.