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% прегледача и препоручује се за апликације са интензивним исцртавањем — графичке уређиваче, графиконе и анимације.