Canvas: що це, методи відображення та як працює

Що таке Canvas?

Canvas — це прямокутна область на екрані, в якій програма виконує попіксельне відображення за допомогою контексту малювання. Концепція зародилася у веб-стандартах HTML5 як частина специфікації WHATWG у 2004 році і з тих пір стала основою для графіки на всіх платформах.

Основна відмінність Canvas від декларативних підходів (SVG, UI-компоненти) полягає в тому, що Canvas не зберігає сцену. Після відображення пікселі фіксуються, і для зміни зображення програма повинна стерти та перемалювати потрібну область. Це дає максимальну продуктивність при анімації та мінімальне споживання пам'яті для зберігання сцени.

Canvas підтримує два типи контексту: 2D для плоскої графіки та WebGL / WebGL2 для тривимірного відображення через апаратне прискорення GPU. За даними Statista (2025), Canvas API використовується в 89% браузерних ігор та 67% веб-редакторів.

Для мобільної розробки Canvas адаптований на кожній платформі: в Android через однойменний клас Canvas, в iOS через Core Graphics та Metal, в .NET MAUI через Microsoft.Maui.Graphics. Єдиний принцип — контекст малювання, система координат та стек трансформацій — залишається незмінним незалежно від платформи.

Елементи Canvas

Полотно являє собою бітову матрицю фіксованого розміру, що задається в пікселях. Кожен піксель зберігає значення RGBA — червоний, зелений, синій канали та альфа-прозорість. Система координат Canvas починається з верхнього лівого кута, де вісь X йде вправо, а вісь Y — вниз.

Розмір полотна визначається двома параметрами: ширина та висота в пікселях. Важливо розрізняти атрибути width та height полотна від CSS-розмірів — CSS може масштабувати видиму область, але внутрішня роздільна здатність залишається заданою атрибутами. Невідповідність цих параметрів веде до розмиття зображення.

В Android розмір Canvas зазвичай збігається з розміром View або Bitmap, на якому він створений. При onDraw() передається Canvas, вже налаштований на розміри в'юхи — розробнику не потрібно задавати розміри вручну.

Як працює Canvas?

Canvas функціонує через контекст малювання — об'єкт, який зберігає поточний стан: колір заливки, товщину лінії, трансформації та шлях. Всі виклики методів малювання застосовуються до цього стану та змінюють бітову матрицю полотна.

Процес відображення слідує конвеєру: очищення області → налаштування стану → побудова шляху → обведення або заливка. При анімації цей цикл повторюється 60 разів на секунду, що вимагає оптимізації кожного кроку для підтримки плавності.

Canvas використовує immediate mode rendering — негайний режим, при якому кожна команда малювання виконується відразу. На відміну від retained mode (SVG або DOM), Canvas не зберігає список об'єктів. Це знижує споживання пам'яті, але ускладнює інтерактивність — розробник сам реалізує хіт-тестінг та перемальовування.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
ctx.font = '16px sans-serif';
ctx.fillText('Hello Canvas', 10, 80);

У прикладі вище отримуємо контекст 2D, задаємо колір заливки, малюємо прямокутник, потім встановлюємо шрифт та виводимо текст. Всі операції виконуються на полотні розміром, вказаним в атрибутах width та height елемента.

Стек станів Canvas дозволяє зберігати та відновлювати параметри малювання. Метод save() поміщає поточний стан у стек, restore() відновлює попередній. Це зручно при каскадних трансформаціях, коли потрібно застосувати зсув або поворот до групи елементів без впливу на решту.

Основні методи Canvas API

Canvas API надає близько 40 методів для відображення примітивів, зображень, тексту та управління стилями. Базовий набір включає методи для роботи з прямокутниками, шляхами, дугами та текстом. Розглянемо ключові групи методів.

Малювання примітивів

Прямокутники — найшвидші примітиви Canvas. Метод fillRect(x, y, w, h) малює залитий прямокутник, strokeRect() — тільки межу, clearRect() — очищає область. Для складних багатокутників використовується об'єкт Path2D, який можна перевикористовувати між кадрами.

Робота із зображеннями

drawImage() — основний метод для відображення растрових зображень на Canvas. Метод приймає три набори параметрів: просте копіювання, масштабування та обрізку з масштабуванням. Зображення може бути завантажене з HTMLImageElement, SVGImageElement або іншого Canvas.

Для мобільної розробки критично, що drawImage() працює з Bitmap в Android та UIImage в iOS. Платформені реалізації використовують апаратне прискорення, коли зображення та Canvas знаходяться в одній текстурній пам'яті GPU. Якщо зображення не збігається за кольоровим профілем, можлива втрата продуктивності через конвертацію.

Анімація на Canvas

requestAnimationFrame() — стандартний механізм для анімації Canvas. На відміну від setInterval, цей метод синхронізує відображення з частотою оновлення екрана (зазвичай 60 FPS). При вкладці у фоні браузер зупиняє виклики, заощаджуючи заряд батареї.

Для оптимізації анімації Canvas слід мінімізувати площу перемальовування: замість очищення всього полотна використовуйте clearRect() тільки на зміненій області. Групування елементів в один шар та кешування статичних частин в offscreen Canvas знижують навантаження на конвеєр рендерингу.

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(x, 60, 25, 0, Math.PI * 2);
    ctx.fill();
    x += 2;
    requestAnimationFrame.bind(animate);
}

Цикл анімації очищає полотно, оновлює позицію об'єкта та перемальовує його. requestAnimationFrame гарантує плавність та автоматичну паузу при приховуванні вкладки, що економить ресурси пристрою.

Canvas у мобільній розробці

Canvas на мобільних платформах реалізований по-різному, але базується на спільній ідеї програмного полотна. В Android клас Canvas — частина графічної системи, що передається в метод onDraw(Canvas) будь-якого View. В iOS еквівалентом служить Core Graphics з контекстом CGContext.

Canvas в Android

Android Canvas працює в зв'язці з Bitmap або SurfaceView. При створенні Canvas через Bitmap відображення виконується в пам'ять, а через SurfaceView — безпосередньо на екран з апаратним прискоренням. З API 14+ Canvas використовує HWUI — апаратний прискорювач, який транслює команди малювання в OpenGL або Vulkan.

Ключові методи Android Canvas включають drawBitmap(), drawCircle(), drawLine() та drawPath(). Всі методи приймають Paint — об'єкт, що керує стилем: кольором, товщиною, ефектами згладжування. За даними Google I/O (2024), Canvas на HWUI показує приріст продуктивності до 40% порівняно з програмним рендерингом.

class CustomView(context: Context) : View(context) {
    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        strokeWidth = 4f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f, 100f, 50f, paint)
        canvas.drawText("Canvas Android", 100f, 200f, paint)
    }
}

В Android Canvas за замовчуванням використовує апаратне прискорення на API 14+. Для складної графіки рекомендується SurfaceView або TextureView, які виділяють окремий шар для відображення у фоновому потоці. Це запобігає блокуванню UI-потоку при інтенсивній анімації.

Canvas в iOS

Core Graphics — фреймворк Apple для растрової та векторної графіки, еквівалент Canvas. Контекст CGContext надає методи для малювання ліній, кривих, градієнтів та тіней. В SwiftUI Canvas доступний через структуру Canvas, додану в iOS 15.

SwiftUI Canvas використовує GraphicsContext — типобезпечну обгортку над Core Graphics. Розробник працює з GraphicsContext, який підтримує трансформації, шари та символи. На відміну від UIKit, SwiftUI Canvas автоматично обробляє Retina-екрани та динамічні типи.

struct MyCanvasView: View {
    var body: some View {
        Canvas { context, size in
            context.fill(
                Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100)),
                with: .color(.red)
            )
            context.draw(
                Text("Canvas iOS"),
                at: CGPoint(x: 50, y: 150)
            )
        }
        .frame(width: 300, height: 300)
    }
}

SwiftUI Canvas відрізняється декларативним синтаксисом та автоматичною оптимізацією відображення. Фреймворк сам визначає, які частини полотна потрібно перемалювати при зміні стану. GraphicsContext підтримує шари через метод drawLayer, що спрощує створення багатошарової графіки.

Продуктивність Canvas

Продуктивність Canvas залежить від трьох факторів: площа перемальовування, кількість викликів малювання та складність операцій. Кожен виклик методу малювання — це команда, яка проходить через конвеєр: CPU формує команду, GPU виконує растеризацію.

Основне правило оптимізації — мінімізація кількості викликів. Замість відображення 1000 окремих точок використовуйте шлях з 1000 сегментами — один виклик stroke() замість 1000. Друге правило — кешування статики: винесіть незмінні елементи в offscreen Canvas та копіюйте через drawImage().

Інструменти профілювання: Chrome DevTools Performance для веба, GPU Inspector для Android та Instruments для iOS. За даними Google Chrome Developers (2025), 70% проблем з продуктивністю Canvas викликані надмірним перемальовуванням та відсутністю кешування шарів.

Для мобільних пристроїв критична економія заряду батареї. Надмірне відображення навантажує GPU та знижує час роботи. Використовуйте метод willBePresented() в Android та displayLink в iOS для синхронізації з частотою оновлення екрана.

Розширені можливості Canvas

Сучасний Canvas вийшов за рамки простої 2D-відображення. WebGL на базі CanvasContext дозволяє рендерити тривимірну графіку з апаратним прискоренням. OffscreenCanvas переносить важке відображення в Web Workers, не блокуючи UI-потік.

WebGL через Canvas

WebGL — це контекст Canvas, що надає доступ до OpenGL ES з браузера. Замість fillRect() розробник пише шейдери на GLSL та завантажує геометрію в буфери. За даними Statista (2025), 92% мобільних браузерів підтримують WebGL 2.0, що робить Canvas основою для веб-ігор та 3D-візуалізацій.

Canvas як контейнер для WebGL спрощує інтеграцію 2D та 3D-графіки в одному додатку. Наприклад, 3D-сцена рендериться через WebGL, а UI-оверлей — через 2D-контекст того ж полотна. Змішане відображення вимагає управління z-порядком та синхронізації частоти кадрів.

OffscreenCanvas

OffscreenCanvas — API для перенесення відображення у фоновий потік. На відміну від звичайного Canvas, OffscreenCanvas не прив'язаний до DOM і може використовуватися в Web Worker. Це дозволяє виконувати складні обчислення графіки паралельно з основним потоком без просадки FPS.

Передача готового кадру з Worker в основний потік відбувається через transferControlToOffscreen() та commit(). За даними Chrome Platform Status (2025), OffscreenCanvas підтримується в 87% браузерів та рекомендований для додатків з інтенсивним відображенням — графічних редакторів, чартів та анімацій.