Canvas: Was es ist, Rendering-Methoden und wie es funktioniert

Was ist Canvas?

Canvas ist ein rechteckiger Bereich auf dem Bildschirm, in dem ein Programm mithilfe eines Zeichenkontexts pixelgenaues Rendering durchführt. Das Konzept entstand 2004 in den HTML5-Webstandards als Teil der WHATWG-Spezifikation und wurde seitdem zur Grundlage für Grafiken auf allen Plattformen.

Der Hauptunterschied zwischen Canvas und deklarativen Ansätzen (SVG, UI-Komponenten) besteht darin, dass Canvas keine Szene speichert. Nach dem Rendern werden Pixel fixiert, und um das Bild zu ändern, muss das Programm den erforderlichen Bereich löschen und neu zeichnen. Dies bietet maximale Leistung bei Animationen und minimalen Speicherverbrauch für die Szenenspeicherung.

Canvas unterstützt zwei Arten von Kontexten: 2D für flache Grafiken und WebGL / WebGL2 für dreidimensionales Rendering mit GPU-Hardwarebeschleunigung. Laut Statista (2025) wird die Canvas-API in 89% der Browserspiele und 67% der Web-Editoren verwendet.

Für die mobile Entwicklung ist Canvas auf jeder Plattform angepasst: in Android über die Canvas-Klasse, in iOS über Core Graphics und Metal, in .NET MAUI über Microsoft.Maui.Graphics. Das einheitliche Prinzip — Zeichenkontext, Koordinatensystem und Transformationsstapel — bleibt plattformunabhängig unverändert.

Canvas-Elemente

Die Leinwand ist eine Bitmap-Matrix fester Größe, die in Pixeln angegeben wird. Jedes Pixel speichert einen RGBA-Wert — Rot-, Grün-, Blaukanal und Alphatransparenz. Das Canvas-Koordinatensystem beginnt in der oberen linken Ecke, wobei die X-Achse nach rechts und die Y-Achse nach unten verläuft.

Die Größe der Leinwand wird durch zwei Parameter bestimmt: Breite und Höhe in Pixeln. Es ist wichtig, die width- und height-Attribute der Leinwand von CSS-Abmessungen zu unterscheiden — CSS kann den sichtbaren Bereich skalieren, aber die interne Auflösung bleibt durch die Attribute festgelegt. Eine Nichtübereinstimmung dieser Parameter führt zu Unschärfe des Bildes.

In Android entspricht die Canvas-Größe normalerweise der Größe der View oder Bitmap, auf der sie erstellt wird. Beim Aufruf von onDraw() wird ein bereits an die Ansichtsgröße angepasster Canvas übergeben — der Entwickler muss die Abmessungen nicht manuell festlegen.

Wie funktioniert Canvas?

Canvas arbeitet über einen Zeichenkontext — ein Objekt, das den aktuellen Zustand speichert: Füllfarbe, Linienstärke, Transformationen und Pfad. Alle Aufrufe von Zeichenmethoden werden auf diesen Zustand angewendet und modifizieren die Bitmap-Matrix der Leinwand.

Der Rendering-Prozess folgt einer Pipeline: Bereich löschen → Zustand konfigurieren → Pfad erstellen → Kontur oder Füllung. Während einer Animation wiederholt sich dieser Zyklus 60 Mal pro Sekunde, was eine Optimierung jedes Schrittes erfordert, um die Flüssigkeit zu erhalten.

Canvas verwendet den Immediate Mode Rendering, bei dem jeder Zeichenbefehl sofort ausgeführt wird. Im Gegensatz zum Retained Mode (SVG oder DOM) speichert Canvas keine Objektliste. Dies reduziert den Speicherverbrauch, erschwert aber die Interaktivität — der Entwickler muss Treffertests und Neuzeichnung selbst implementieren.

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

Im obigen Beispiel holen wir den 2D-Kontext, setzen die Füllfarbe, zeichnen ein Rechteck, dann setzen wir die Schriftart und geben Text aus. Alle Operationen werden auf einer Leinwand mit der in den width- und height-Attributen des Elements angegebenen Größe ausgeführt.

Der Canvas-Zustandsstapel ermöglicht das Speichern und Wiederherstellen von Zeichenparametern. Die Methode save() legt den aktuellen Zustand auf den Stapel, restore() stellt den vorherigen wieder her. Dies ist praktisch für kaskadierende Transformationen, wenn eine Verschiebung oder Drehung auf eine Gruppe von Elementen angewendet werden soll, ohne die anderen zu beeinflussen.

Wichtigste Canvas-API-Methoden

Canvas API bietet etwa 40 Methoden zum Rendern von Primitiven, Bildern, Text und zur Verwaltung von Stilen. Der Basissatz umfasst Methoden für Rechtecke, Pfade, Bögen und Text. Betrachten wir die wichtigsten Methodengruppen.

Primitive zeichnen

Rechtecke sind die schnellsten Canvas-Primitive. Die Methode fillRect(x, y, w, h) zeichnet ein gefülltes Rechteck, strokeRect() zeichnet nur den Rand, clearRect() löscht den Bereich. Für komplexe Polygone wird das Path2D-Objekt verwendet, das zwischen Frames wiederverwendet werden kann.

Arbeiten mit Bildern

drawImage() ist die Hauptmethode zum Rendern von Bitmap-Bildern auf Canvas. Die Methode akzeptiert drei Parametersätze: einfaches Kopieren, Skalieren und Zuschneiden mit Skalieren. Das Bild kann von HTMLImageElement, SVGImageElement oder einem anderen Canvas geladen werden.

Für die mobile Entwicklung ist es entscheidend, dass drawImage() mit Bitmap in Android und UIImage in iOS funktioniert. Plattformimplementierungen nutzen Hardwarebeschleunigung, wenn sich Bild und Canvas im selben GPU-Texturspeicher befinden. Stimmt das Farbprofil des Bildes nicht überein, kann es durch Konvertierung zu Leistungseinbußen kommen.

Animation auf Canvas

requestAnimationFrame() ist der Standardmechanismus für Canvas-Animationen. Im Gegensatz zu setInterval synchronisiert diese Methode das Rendern mit der Bildwiederholrate (normalerweise 60 FPS). Wenn der Tab im Hintergrund ist, stoppt der Browser die Aufrufe und spart so Akku.

Um Canvas-Animationen zu optimieren, minimieren Sie den Neuzeichnungsbereich: Verwenden Sie clearRect() nur auf der geänderten Region, anstatt die gesamte Leinwand zu löschen. Das Gruppieren von Elementen in einer einzigen Ebene und das Zwischenspeichern statischer Teile in einer Offscreen-Canvas reduziert die Last auf der Rendering-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);
}

Die Animationsschleife löscht die Leinwand, aktualisiert die Objektposition und zeichnet sie neu. requestAnimationFrame gewährleistet Flüssigkeit und automatische Pause beim Ausblenden des Tabs, was Geräteressourcen schont.

Canvas in der mobilen Entwicklung

Canvas wird auf mobilen Plattformen unterschiedlich implementiert, basiert jedoch auf der gemeinsamen Idee einer programmatischen Leinwand. In Android ist die Canvas-Klasse Teil des Grafiksystems und wird an die onDraw(Canvas)-Methode jeder View übergeben. In iOS ist das Äquivalent Core Graphics mit dem CGContext-Kontext.

Canvas in Android

Android Canvas arbeitet mit Bitmap oder SurfaceView zusammen. Bei der Erstellung von Canvas über Bitmap erfolgt das Rendern im Speicher, bei SurfaceView direkt auf dem Bildschirm mit Hardwarebeschleunigung. Ab API 14+ verwendet Canvas HWUI — einen Hardwarebeschleuniger, der Zeichenbefehle in OpenGL oder Vulkan übersetzt.

Zu den wichtigsten Android-Canvas-Methoden gehören drawBitmap(), drawCircle(), drawLine() und drawPath(). Alle Methoden akzeptieren Paint — ein Objekt, das den Stil steuert: Farbe, Stärke, Antialiasing-Effekte. Laut Google I/O (2024) zeigt Canvas auf HWUI eine Leistungssteigerung von bis zu 40% im Vergleich zum Software-Rendering.

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

In Android verwendet Canvas ab API 14+ standardmäßig Hardwarebeschleunigung. Für komplexe Grafiken werden SurfaceView oder TextureView empfohlen, die eine separate Ebene für das Rendern in einem Hintergrundthread zuweisen. Dies verhindert die Blockierung des UI-Threads bei intensiven Animationen.

Canvas in iOS

Core Graphics ist Apples Framework für Raster- und Vektorgrafiken, das Äquivalent zu Canvas. Der CGContext-Kontext bietet Methoden zum Zeichnen von Linien, Kurven, Gradienten und Schatten. In SwiftUI ist Canvas über die in iOS 15 hinzugefügte Canvas-Struktur verfügbar.

SwiftUI Canvas verwendet GraphicsContext — einen typsicheren Wrapper über Core Graphics. Der Entwickler arbeitet mit GraphicsContext, der Transformationen, Ebenen und Symbole unterstützt. Im Gegensatz zu UIKit behandelt SwiftUI Canvas automatisch Retina-Displays und dynamische Typen.

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 zeichnet sich durch deklarative Syntax und automatische Rendering-Optimierung aus. Das Framework bestimmt selbst, welche Teile der Leinwand bei Zustandsänderungen neu gezeichnet werden müssen. GraphicsContext unterstützt Ebenen über die Methode drawLayer, was die Erstellung mehrschichtiger Grafiken vereinfacht.

Canvas-Leistung

Die Canvas-Leistung hängt von drei Faktoren ab: Neuzeichnungsfläche, Anzahl der Zeichenaufrufe und Operationskomplexität. Jeder Zeichenmethodenaufruf ist ein Befehl, der eine Pipeline durchläuft: Die CPU bildet den Befehl, die GPU führt die Rasterisierung durch.

Die wichtigste Optimierungsregel ist die Minimierung der Anzahl der Aufrufe. Zeichnen Sie statt 1000 einzelner Punkte einen Pfad mit 1000 Segmenten — ein stroke()-Aufruf statt 1000. Die zweite Regel ist das Zwischenspeichern statischer Elemente: Verschieben Sie unveränderte Elemente in eine Offscreen-Canvas und kopieren Sie sie über drawImage().

Profiling-Tools: Chrome DevTools Performance für das Web, GPU Inspector für Android und Instruments für iOS. Laut Google Chrome Developers (2025) werden 70% der Canvas-Leistungsprobleme durch übermäßiges Neuzeichnen und fehlendes Layer-Caching verursacht.

Für mobile Geräte ist die Akkuschonung entscheidend. Übermäßiges Rendern belastet die GPU und verkürzt die Laufzeit. Verwenden Sie die Methode willBePresented() in Android und displayLink in iOS zur Synchronisation mit der Bildwiederholfrequenz.

Erweiterte Canvas-Funktionen

Modernes Canvas geht über einfaches 2D-Rendering hinaus. WebGL auf Basis von CanvasContext ermöglicht das Rendern dreidimensionaler Grafiken mit Hardwarebeschleunigung. OffscreenCanvas verlagert schweres Rendering in Web Workers, ohne den UI-Thread zu blockieren.

WebGL über Canvas

WebGL ist ein Canvas-Kontext, der vom Browser aus Zugriff auf OpenGL ES bietet. Statt fillRect() schreibt der Entwickler Shader in GLSL und lädt Geometrie in Puffer. Laut Statista (2025) unterstützen 92% der mobilen Browser WebGL 2.0, was Canvas zur Grundlage für Webspiele und 3D-Visualisierungen macht.

Canvas als Container für WebGL vereinfacht die Integration von 2D- und 3D-Grafiken in einer einzigen Anwendung. Beispielsweise wird eine 3D-Szene über WebGL gerendert, während das UI-Overlay über den 2D-Kontext derselben Leinwand gerendert wird. Gemischtes Rendering erfordert die Verwaltung der Z-Reihenfolge und die Synchronisation der Bildraten.

OffscreenCanvas

OffscreenCanvas ist eine API zum Verlagern des Renderings in einen Hintergrundthread. Im Gegensatz zu normalen Canvas ist OffscreenCanvas nicht an das DOM gebunden und kann in einem Web Worker verwendet werden. Dies ermöglicht komplexe Grafikberechnungen parallel zum Hauptthread ohne FPS-Einbrüche.

Die Übertragung eines fertigen Frames von einem Worker zum Hauptthread erfolgt über transferControlToOffscreen() und commit(). Laut Chrome Platform Status (2025) wird OffscreenCanvas von 87% der Browser unterstützt und für Anwendungen mit intensivem Rendering empfohlen — Grafikeditoren, Diagramme und Animationen.