CanvasRenderingContext2D

Интерфейс CanvasRenderingContext2D, являющийся частью API холста, предоставляет контекст 2D рендеринга для области рисования элемента <canvas>. Он используется для рисования фигур, текста, изображений и других объектов.

Свойства и методы интерфейса описаны в справочной части этой страницы. Учебник по холсту также содержит более подробные объяснения, примеры и ресурсы.

Для OffscreenCanvas существует аналогичный интерфейс, который предоставляет контекст рендеринга. Контекст офскрин рендеринга наследует большинство свойств и методов CanvasRenderingContext2D и подробно описан на странице справки OffscreenCanvasRenderingContext2D.

Для получения экземпляра CanvasRenderingContext2D, необходимо сначала иметь HTML-элемент <canvas> для работы:

<canvas id="my-house" width="300" height="300"></canvas>

Для получения контекста 2D рендеринга холста вызовите getContext() на элементе <canvas>, передав '2d' в качестве аргумента:

const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

Имея контекст, вы можете рисовать все, что захотите. Этот код рисует дом:

// Set line width
ctx.lineWidth = 10;

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

Результат рисования выглядит следующим образом:

CanvasRenderingContext2D.isContextLost()

Возвращает true , если контекст рендеринга был утерян.

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

CanvasRenderingContext2D.clearRect()

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

CanvasRenderingContext2D.fillRect()

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

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.letterSpacing

Интерлиньяж. По умолчанию: 0px.

CanvasRenderingContext2D.fontKerning

Кернинг шрифта. Возможные значения: auto (по умолчанию), normal, none.

CanvasRenderingContext2D.fontStretch

Растяжение шрифта. Возможные значения: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (по умолчанию), semi-expanded, expanded, extra-expanded, ultra-expanded.

CanvasRenderingContext2D.fontVariantCaps

Вариант прописных букв. Возможные значения: normal (по умолчанию), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.

CanvasRenderingContext2D.textRendering

Рендеринг текста. Возможные значения: auto (по умолчанию), optimizeSpeed, optimizeLegibility, geometricPrecision.

CanvasRenderingContext2D.wordSpacing

Межсловный интервал. Значение по умолчанию: 0px

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

CanvasRenderingContext2D.fillStyle

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

CanvasRenderingContext2D.strokeStyle

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

CanvasRenderingContext2D.createConicGradient()

Создаёт конический градиент вокруг точки, заданной координатами параметров.

CanvasRenderingContext2D.createLinearGradient()

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

CanvasRenderingContext2D.createRadialGradient()

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

CanvasRenderingContext2D.createPattern()

Создаёт узор с использованием заданного изображения. Он повторяет исходное изображение в указанных направлениях. Этот метод возвращает 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()

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

CanvasRenderingContext2D.quadraticCurveTo()

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

CanvasRenderingContext2D.arc()

Добавляет дугу окружности в текущий контур.

CanvasRenderingContext2D.arcTo()

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

CanvasRenderingContext2D.ellipse()

Добавляет эллиптическую дугу в текущий контур.

CanvasRenderingContext2D.rect()

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

CanvasRenderingContext2D.roundRect()

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

CanvasRenderingContext2D.fill()

Заполняет текущие подконтуры текущим стилем заливки.

CanvasRenderingContext2D.stroke()

Отображает текущие подконтуры текущим стилем обводки.

CanvasRenderingContext2D.drawFocusIfNeeded()

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

CanvasRenderingContext2D.clip()

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

CanvasRenderingContext2D.isPointInPath()

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

CanvasRenderingContext2D.isPointInStroke()

Определяет, содержится ли указанная точка в области, очерченной обводкой контура.

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

CanvasRenderingContext2D.getTransform()

Возвращает текущую матрицу преобразования, применяемую к контексту.

CanvasRenderingContext2D.rotate()

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

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, представляющий данные пикселей для области холста, заданной прямоугольником, который начинается в (sx, sy) и имеет ширину sw и высоту sh.

CanvasRenderingContext2D.putImageData()

Отображает данные из заданного объекта ImageData на растровую картинку. Если указан прямоугольник модификации, то только пиксели из этого прямоугольника будут отрисованы.

CanvasRenderingContext2D.imageSmoothingEnabled

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

CanvasRenderingContext2D.imageSmoothingQuality

Позволяет установить качество сглаживания изображений.

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

CanvasRenderingContext2D.save()

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

CanvasRenderingContext2D.restore()

Восстанавливает состояние стиля рисования до последнего элемента в стеке состояний, сохраненного с помощью save().

CanvasRenderingContext2D.canvas

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

CanvasRenderingContext2D.getContextAttributes()

Возвращает объект, содержащий атрибуты контекста, используемые браузером. Атрибуты контекста можно запросить при использовании HTMLCanvasElement.getContext() для создания 2D-контекста.

CanvasRenderingContext2D.reset()

Сбрасывает контекст рендеринга, включая буфер, стек состояния рисования, путь и стили.

CanvasRenderingContext2D.isContextLost() Экспериментальный

Возвращает true, если контекст рендеринга был потерян.

CanvasRenderingContext2D.filter

Применяет CSS или SVG фильтр к холсту, например, для изменения яркости или размытия.

• HTMLCanvasElement
• <canvas>
• OffscreenCanvas