Що таке контекст відображення canvas? Які існують типи контексту для рендерингу двовимірної та тривимірної графіки?

Повне пояснення

Що це і навіщо Контекст відображення canvas — це інтерфейс, який дозволяє виконувати графічні операції у елементі <canvas>. Він створюється за допомогою методу getContext().

Ключові принципи, терміни, інваріанти

• 2d контекст: API для 2‑D малювання (лінії, кола, текст, зображення).
• webgl/webgl2: API на основі OpenGL ES для 3‑D рендерингу.
• Контекст пов’язаний з конкретним елементом canvas; зміна розмірів canvas скидає контекст.

Як це працює При виклику canvas.getContext('2d') повертається об’єкт CanvasRenderingContext2D. Для WebGL повертається WebGLRenderingContext або WebGL2RenderingContext. Ці об’єкти мають власні методи і властивості, що відповідають відповідним графічним API.

Практика і реалізація

const ctx2d = canvas.getContext('2d'); // 2‑D
ctx2d.fillRect(10, 10, 100, 50);
const gl = canvas.getContext('webgl2'); // 3‑D
// налаштування шейдерів, буферів тощо

Тестування Для 2‑D можна перевіряти pixel data через getImageData. Для WebGL використовують фреймбуфер і gl.readPixels.

Оптимізація продуктивності

• У 2‑D мінімізувати часті зміни стилей і перерисовку.
• У WebGL використовувати VBO, VAO, інстансинг і мінімізувати draw calls.

Accessibility Canvas сам по собі не семантичний; додайте role="img" і атрибут aria-label для опису.

Безпека та валідація

• Уникайте виконання небезпечного коду у шейдерах.
• Обмежуйте доступ до контексту через CSP.

Типові помилки й edge cases

• Виклик getContext('2d') після зміни розмірів canvas скидає контекст.
• WebGL не підтримується на деяких старих пристроях; перевірка gl на null.

Cheatsheet + follow‑up питання

• canvas.getContext('2d') → 2D API.
• canvas.getContext('webgl') / webgl2 → 3D API.
• Питання: як переключити між контекстами? Як обробляти помилки при відсутності WebGL?