Canvas: co to je, metody vykreslování a jak funguje

Co je Canvas?

Canvas je obdélníková oblast na obrazovce, ve které program provádí vykreslování pixel po pixelu pomocí kontextu kreslení. Koncept vznikl ve webových standardech HTML5 jako součást specifikace WHATWG v roce 2004 a od té doby se stal základem grafiky na všech platformách.

Hlavní rozdíl mezi Canvas a deklarativními přístupy (SVG, UI komponenty) je v tom, že Canvas neukládá scénu. Po vykreslení jsou pixely fixovány a pro změnu obrázku musí program vymazat a překreslit potřebnou oblast. To poskytuje maximální výkon při animaci a minimální spotřebu paměti pro ukládání scény.

Canvas podporuje dva typy kontextu: 2D pro plochou grafiku a WebGL / WebGL2 pro trojrozměrné vykreslování přes hardwarovou akceleraci GPU. Podle Statista (2025) se Canvas API používá v 89% prohlížečových her a 67% webových editorů.

Pro mobilní vývoj je Canvas přizpůsoben na každé platformě: v Android přes stejnojmennou třídu Canvas, v iOS přes Core Graphics a Metal, v .NET MAUI přes Microsoft.Maui.Graphics. Jednotný princip — kontext kreslení, souřadnicový systém a zásobník transformací — zůstává nezměněn bez ohledu na platformu.

Prvky Canvas

Plátno představuje bitovou matici pevné velikosti, určené v pixelech. Každý pixel ukládá hodnotu RGBA — červený, zelený, modrý kanál a alfa průhlednost. Souřadnicový systém Canvas začíná v levém horním rohu, kde osa X jde doprava a osa Y dolů.

Velikost plátna je určena dvěma parametry: šířka a výška v pixelech. Je důležité rozlišovat atributy width a height plátna od CSS velikostí — CSS může škálovat viditelnou oblast, ale vnitřní rozlišení zůstává určené atributy. Neshoda těchto parametrů vede k rozmazání obrázku.

V Android se velikost Canvas obvykle shoduje s velikostí View nebo Bitmap, na kterém je vytvořen. Při onDraw() je předán Canvas již nastavený na velikost view — vývojář nemusí ručně nastavovat velikosti.

Jak funguje Canvas?

Canvas funguje přes kontext kreslení — objekt, který ukládá aktuální stav: barvu výplně, tloušťku čáry, transformace a cestu. Všechna volání metod kreslení se aplikují na tento stav a mění bitovou matici plátna.

Proces vykreslování následuje pipeline: vyčištění oblasti → nastavení stavu → stavba cesty → obrys nebo výplň. Při animaci se tento cyklus opakuje 60krát za sekundu, což vyžaduje optimalizaci každého kroku pro udržení plynulosti.

Canvas používá immediate mode rendering — okamžitý režim, při kterém se každý příkaz kreslení provede ihned. Na rozdíl od retained mode (SVG nebo DOM) Canvas neukládá seznam objektů. To snižuje spotřebu paměti, ale komplikuje interaktivitu — vývojář sám implementuje hit-testing a překreslování.

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);

V příkladu výše získáme kontext 2D, nastavíme barvu výplně, nakreslíme obdélník, poté nastavíme písmo a zobrazíme text. Všechny operace se provádějí na plátně o velikosti určené v atributech width a height prvku.

Zásobník stavů Canvas umožňuje ukládat a obnovovat parametry kreslení. Metoda save() umístí aktuální stav do zásobníku, restore() obnoví předchozí. To je užitečné při kaskádových transformacích, kdy je třeba aplikovat posun nebo otočení na skupinu prvků bez ovlivnění ostatních.

Hlavní metody Canvas API

Canvas API poskytuje přibližně 40 metod pro vykreslování primitiv, obrázků, textu a správu stylů. Základní sada zahrnuje metody pro práci s obdélníky, cestami, oblouky a textem. Podívejme se na klíčové skupiny metod.

Kreslení primitiv

Obdélníky — nejrychlejší primitiva Canvas. Metoda fillRect(x, y, w, h) kreslí vyplněný obdélník, strokeRect() — pouze okraj, clearRect() — čistí oblast. Pro složité mnohoúhelníky se používá objekt Path2D, který lze znovu použít mezi snímky.

Práce s obrázky

drawImage() — hlavní metoda pro vykreslování rastrových obrázků na Canvas. Metoda přijímá tři sady parametrů: jednoduché kopírování, škálování a oříznutí se škálováním. Obrázek může být načten z HTMLImageElement, SVGImageElement nebo jiného Canvas.

Pro mobilní vývoj je kritické, že drawImage() pracuje s Bitmap v Android a UIImage v iOS. Platformové implementace používají hardwarovou akceleraci, když jsou obrázek a Canvas ve stejné texturové paměti GPU. Pokud obrázek neodpovídá barevným profilem, je možná ztráta výkonu kvůli konverzi.

Animace na Canvas

requestAnimationFrame() — standardní mechanismus pro animaci Canvas. Na rozdíl od setInterval tato metoda synchronizuje vykreslování s obnovovací frekvencí obrazovky (obvykle 60 FPS). Když je karta na pozadí, prohlížeč zastaví volání a šetří baterii.

Pro optimalizaci animace Canvas je třeba minimalizovat plochu překreslování: místo čištění celého plátna použijte clearRect() pouze na změněné oblasti. Seskupení prvků do jedné vrstvy a ukládání statických částí do offscreen Canvas do mezipaměti snižuje zátěž na renderovacím pipeline.

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);
}

Animační cyklus čistí plátno, aktualizuje pozici objektu a překresluje jej. requestAnimationFrame zaručuje plynulost a automatickou pauzu při skrytí karty, což šetří zdroje zařízení.

Canvas v mobilním vývoji

Canvas na mobilních platformách je implementován různě, ale vychází ze společné myšlenky programového plátna. V Android je třída Canvas součástí grafického systému, předávaná do metody onDraw(Canvas) libovolného View. V iOS je ekvivalentem Core Graphics s kontextem CGContext.

Canvas v Android

Android Canvas pracuje ve spojení s Bitmap nebo SurfaceView. Při vytvoření Canvas přes Bitmap se vykreslování provádí do paměti a přes SurfaceView — přímo na obrazovku s hardwarovou akcelerací. Od API 14+ Canvas používá HWUI — hardwarový akcelerátor, který překládá příkazy kreslení do OpenGL nebo Vulkan.

Klíčové metody Android Canvas zahrnují drawBitmap(), drawCircle(), drawLine() a drawPath(). Všechny metody přijímají Paint — objekt, který spravuje styl: barvu, tloušťku, efekty vyhlazování. Podle Google I/O (2024) vykazuje Canvas na HWUI nárůst výkonu až o 40% ve srovnání s softwarovým vykreslováním.

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)
    }
}

V Android Canvas standardně používá hardwarovou akceleraci od API 14+. Pro složitou grafiku se doporučuje SurfaceView nebo TextureView, které alokují samostatnou vrstvu pro vykreslování na pozadí. Tím se zabrání blokování UI vlákna při intenzivní animaci.

Canvas v iOS

Core Graphics — framework Apple pro rastrovou a vektorovou grafiku, ekvivalent Canvas. Kontext CGContext poskytuje metody pro kreslení čar, křivek, gradientů a stínů. V SwiftUI je Canvas dostupný přes strukturu Canvas, přidanou v iOS 15.

SwiftUI Canvas používá GraphicsContext — typově bezpečný obal nad Core Graphics. Vývojář pracuje s GraphicsContext, který podporuje transformace, vrstvy a symboly. Na rozdíl od UIKit SwiftUI Canvas automaticky zpracovává Retina displeje a dynamické typy.

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 se vyznačuje deklarativní syntaxí a automatickou optimalizací vykreslování. Framework sám určuje, které části plátna je třeba překreslit při změně stavu. GraphicsContext podporuje vrstvy přes metodu drawLayer, což zjednodušuje vytváření vícevrstvé grafiky.

Výkon Canvas

Výkon Canvas závisí na třech faktorech: plocha překreslování, počet volání kreslení a složitost operací. Každé volání metody kreslení je příkaz, který prochází pipeline: CPU formuluje příkaz, GPU provádí rasterizaci.

Základní pravidlo optimalizace — minimalizace počtu volání. Místo kreslení 1000 samostatných bodů použijte cestu s 1000 segmenty — jedno volání stroke() místo 1000. Druhé pravidlo — ukládání statiky do mezipaměti: přesuňte neměnné prvky do offscreen Canvas a kopírujte přes drawImage().

Nástroje profilování: Chrome DevTools Performance pro web, GPU Inspector pro Android a Instruments pro iOS. Podle Google Chrome Developers (2025) je 70% problémů s výkonem Canvas způsobeno nadměrným překreslováním a chybějícím ukládáním vrstev do mezipaměti.

Pro mobilní zařízení je kritické šetření baterie. Nadměrné vykreslování zatěžuje GPU a snižuje dobu provozu. Používejte metodu willBePresented() v Android a displayLink v iOS pro synchronizaci s obnovovací frekvencí obrazovky.

Pokročilé možnosti Canvas

Moderní Canvas překročil rámec jednoduchého 2D vykreslování. WebGL založený na CanvasContext umožňuje vykreslovat trojrozměrnou grafiku s hardwarovou akcelerací. OffscreenCanvas přenáší těžké vykreslování do Web Workers, aniž by blokoval UI vlákno.

WebGL přes Canvas

WebGL je kontext Canvas, který poskytuje přístup k OpenGL ES z prohlížeče. Místo fillRect() vývojář píše shadery v GLSL a načítá geometrii do bufferů. Podle Statista (2025) podporuje 92% mobilních prohlížečů WebGL 2.0, což činí Canvas základem pro webové hry a 3D vizualizace.

Canvas jako kontejner pro WebGL zjednodušuje integraci 2D a 3D grafiky v jedné aplikaci. Například 3D scéna je vykreslována přes WebGL a UI překryv — přes 2D kontext stejného plátna. Smíšené vykreslování vyžaduje správu Z-pořadí a synchronizaci snímkové frekvence.

OffscreenCanvas

OffscreenCanvas — API pro přenos vykreslování do vlákna na pozadí. Na rozdíl od běžného Canvas není OffscreenCanvas vázán na DOM a může být použit v Web Worker. To umožňuje provádět složité grafické výpočty paralelně s hlavním vláknem bez poklesu FPS.

Přenos hotového snímku z Workeru do hlavního vlákna probíhá přes transferControlToOffscreen() a commit(). Podle Chrome Platform Status (2025) je OffscreenCanvas podporován v 87% prohlížečů a doporučuje se pro aplikace s intenzivním vykreslováním — grafické editory, grafy a animace.