GetContext: примеры (JAVASCRIPT)

Короткие примеры использования

Пример 1: Базовое использование с 2D контекстом

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
console.log(ctx); // CanvasRenderingContext2D { ... }

CanvasRenderingContext2D { canvas: canvas#myCanvas, ... }

Пример 2: Получение WebGL контекста с атрибутами

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl', { antialias: false, depth: true });
console.log(gl instanceof WebGLRenderingContext);

true

Пример 3: Попытка получить неподдерживаемый контекст

const ctx = canvas.getContext('experimental-webgl5');
console.log(ctx);

null

Похожие функции в JavaScript

OffscreenCanvas.getContext()

Работает аналогично, но для холста, не привязанного к DOM. Полезен для Web Worker.

SVG и DOM API

Для векторной графики можно использовать SVG и методы createElementNS, setAttribute. Подходит для масштабируемой графики, но с другим подходом к рисованию.

WebGL методы

В рамках WebGL контекста используются специализированные функции (createBuffer, texImage2D), но они требуют полученного через getContext('webgl') контекста как базиса.

Альтернативы в других языках программирования

Python (библиотека PIL/Pillow)

Создание изображения и контекста рисования происходит через отдельные объекты.

from PIL import Image, ImageDraw
img = Image.new('RGB', (200, 200), color='white')
draw = ImageDraw.Draw(img)  # Аналог получения контекста
draw.rectangle((50, 50, 150, 150), fill='blue')
img.save('example.png')

C# (System.Drawing.Graphics)

Контекст графики получается из изображения или контрола.

using (Bitmap bmp = new Bitmap(200, 200))
using (Graphics g = Graphics.FromImage(bmp)) // Аналог getContext
{
    g.FillRectangle(Brushes.Blue, 50, 50, 100, 100);
    bmp.Save("example.png");
}

PHP (библиотека GD)

Ресурс изображения и функции рисования действуют похожим образом.

$im = imagecreatetruecolor(200, 200);
$blue = imagecolorallocate($im, 0, 0, 255);
imagefilledrectangle($im, 50, 50, 150, 150, $blue);
imagepng($im, 'example.png');
imagedestroy($im);

Типичные ошибки

Ошибка 1: Вызов метода у элемента, не являющегося canvas

const div = document.querySelector('div');
const ctx = div.getContext('2d'); // Uncaught TypeError: div.getContext is not a function

Uncaught TypeError: div.getContext is not a function

Ошибка 2: Неправильный тип контекста или опечатка

const ctx = canvas.getContext('2D'); // Использована заглавная 'D'
console.log(ctx);

null

Ошибка 3: Попытка получить несколько контекстов разного типа с одного canvas

const ctx2d = canvas.getContext('2d');
const ctxWebGL = canvas.getContext('webgl'); // Попытка получить второй контекст
console.log(ctxWebGL);

null

История изменений

Метод getContext остается стабильным. Основные изменения связаны с добавлением новых типов контекстов:

• webgl2 был стандартизирован и добавлен в основные браузеры.
• Контекст bitmaprenderer для эффективного рендеринга ImageBitmap.
• Экспериментальные контексты, такие как webgpu, находятся в разработке.

Атрибуты контекста также эволюционировали, например, для 2D-контекста добавлена поддержка willReadFrequently как подсказка для оптимизации.

Расширенные примеры применения

Пример 1: Рисование графика с использованием 2D контекста

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 300;
const ctx = canvas.getContext('2d');

// Оси
ctx.beginPath();
ctx.moveTo(50, 250); ctx.lineTo(350, 250); // Ось X
ctx.moveTo(50, 50); ctx.lineTo(50, 250);  // Ось Y
ctx.stroke();

// Данные графика
const data = [30, 80, 45, 120, 90];
data.forEach((value, index) => {
    const x = 80 + index * 60;
    const y = 250 - value;
    ctx.fillStyle = 'steelblue';
    ctx.fillRect(x - 15, y, 30, value);
});

document.body.appendChild(canvas);

Пример 2: Использование контекста bitmaprenderer для отображения ImageBitmap

async function loadAndRender() {
    const canvas = document.getElementById('bitmapCanvas');
    const ctx = canvas.getContext('bitmaprenderer');
    
    // Загрузка и декодирование изображения в ImageBitmap
    const response = await fetch('image.png');
    const blob = await response.blob();
    const bitmap = await createImageBitmap(blob);
    
    // Передача bitmap в контекст для рендеринга
    ctx.transferFromImageBitmap(bitmap);
}

Пример 3: Проверка поддержки контекста и fallback

function getSupportedContext(canvas, types) {
    for (const type of types) {
        const ctx = canvas.getContext(type);
        if (ctx) {
            console.log(`Используется контекст: ${type}`);
            return ctx;
        }
    }
    return null;
}

const ctx = getSupportedContext(myCanvas, ['webgl2', 'webgl', 'experimental-webgl']);
if (!ctx) {
    console.warn('WebGL не поддерживается, используется 2D fallback');
    const ctx2d = myCanvas.getContext('2d');
    // Рисование упрощенной версии
}

Пример 4: Работа с контекстом вне основного потока (Web Worker)

// main.js
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// worker.js
self.onmessage = function(e) {
    const canvas = e.data.canvas;
    const ctx = canvas.getContext('2d'); // Контекст получается в воркере
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 150, 100);
};