HTMLCanvasElement: метод getContext()

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте или null, если идентификатор контекста не поддерживается или холст уже настроен на другой режим контекста.

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

contextType

Строка, содержащая идентификатор контекста, определяющий контекст рисования, связанный с холстом. Возможные значения:

"2d"

Создаёт объект CanvasRenderingContext2D, представляющий контекст 2D-рендеринга.

"webgl" (или "experimental-webgl")

Создаёт объект WebGLRenderingContext, представляющий 3D-контекст рендеринга. Этот контекст доступен только в браузерах, поддерживающих WebGL версии 1 (OpenGL ES 2.0).

"webgl2"

Создаёт объект WebGL2RenderingContext, представляющий 3D-контекст рендеринга. Этот контекст доступен только в браузерах, поддерживающих WebGL версии 2 (OpenGL ES 3.0).

"webgpu"

Создаёт объект GPUCanvasContext, представляющий 3D-контекст рендеринга для конвейеров рендеринга WebGPU. Этот контекст доступен только в браузерах, поддерживающих API WebGPU.

"bitmaprenderer"

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

Примечание: Идентификатор "experimental-webgl" используется в новых реализациях WebGL. Эти реализации либо не достигли соответствия набора тестов, либо графические драйверы на платформе ещё не стабильны. Группа Khronos сертифицирует реализации WebGL по определённым правилам соответствия.

contextAttributes Необязательный

При создании контекста рендеринга можно использовать несколько атрибутов контекста, например:

const gl = canvas.getContext("webgl", {
  antialias: false,
  depth: false,
});

Атрибуты контекста 2d:

alpha

Логическое значение, указывающее, содержит ли холст альфа-канал. Если установлено в false, браузер теперь знает, что фон всегда непрозрачен, что может ускорить отрисовку прозрачного содержимого и изображений.

colorSpace Необязательный

Указывает цветовое пространство контекста рендеринга. Возможные значения:

• "srgb" выбирает цветовое пространство sRGB. Это значение по умолчанию.
• "display-p3" выбирает цветовое пространство display-p3.

desynchronized

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

willReadFrequently

Логическое значение, указывающее, планируется ли много операций обратного чтения. Это принудительно использует программный (а не ускоренный аппаратным способом) 2D холст и может экономить память при частом вызове getImageData().

Атрибуты контекста WebGL:

...

Контекст рендеринга, который может быть

• CanvasRenderingContext2D для "2d",
• WebGLRenderingContext для "webgl" и "experimental-webgl",
• WebGL2RenderingContext для "webgl2",
• GPUCanvasContext для "webgpu",
• ImageBitmapRenderingContext для "bitmaprenderer".

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

InvalidStateError DOMException

Выбрасывается, если холст передал свой контроль вне экрана, вызвав HTMLCanvasElement.transferControlToOffscreen().

Учитывая этот элемент <canvas>:

<canvas id="canvas" width="300" height="300"></canvas>

Вы можете получить контекст 2d холста с помощью следующего кода:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
console.log(ctx); // CanvasRenderingContext2D { /* … */ }

Теперь у вас есть 2D-контекст рендеринга для холста, и вы можете рисовать на нём.

• HTMLCanvasElement: Интерфейс, используемый для определения метода HTMLCanvasElement.getContext()
• OffscreenCanvas.getContext()
• CanvasRenderingContext2D.getContextAttributes(), WebGLRenderingContext.getContextAttributes()
• CanvasRenderingContext2D, ImageBitmapRenderingContext, WebGLRenderingContext, WebGL2RenderingContext, GPUCanvasContext: Доступные контексты отрисовки
• Пространство цветов DCI-P3 в Википедии
• Пространство цветов sRGB в Википедии