Kurz erklärt · Technik & Plattform
Das HTML5-Canvas ist ein Element der Web-Sprache HTML, das eine rechteckige Zeichenfläche aus Pixeln auf der Webseite bereitstellt. Per JavaScript werden darauf Formen, Bilder und Text gemalt – bei Spielen meist viele Male pro Sekunde neu.
Auch: Canvas, Canvas-Element, HTML Canvas, Canvas 2D, Zeichenfläche im Browser
Was ist das HTML5-Canvas?
Canvas ist Englisch für Leinwand. Mit dem Element <canvas> reserviert eine Webseite eine Fläche mit fester Breite und Höhe in Pixeln. Was darauf erscheint, bestimmt allein der JavaScript-Code: Er malt Rechtecke, Kreise, Linien, Bilder und Text.
Das Canvas kam mit HTML5 in den Web-Standard und hat Browserspiele ohne Zusatzprogramme möglich gemacht. Heute nutzen es Puzzles, Jump’n’Runs, Zeichenspiele und Grafik-Werkzeuge. Für 3D-Grafik dient dieselbe Fläche als Leinwand für WebGL.
Wie zeichnet ein Spiel auf dem Canvas?
Das Canvas hat kein Gedächtnis für Objekte, es merkt sich nur Pixel. Bewegt sich ein Ball, muss das Spiel das ganze Bild neu malen. Das geschieht in einer Schleife, dem Game Loop:
- Rechnen: Das Spiel bewegt Figuren, prüft Treffer und zählt Punkte.
- Leeren: Die Fläche wird gelöscht, etwa mit
clearRect(). - Zeichnen: Hintergrund, Figuren und Anzeigen werden an ihren neuen Positionen gemalt.
- Wiederholen: Mit
requestAnimationFrame()bittet das Spiel den Browser um den nächsten Durchgang, passend zum Takt des Bildschirms.
Bei 60 Durchgängen pro Sekunde bleiben für jedes Bild rund 16,7 Millisekunden. Schafft das Spiel das nicht, sinkt die Bildrate, und es ruckelt.
Tipp: Damit Grafik auf hochauflösenden Handydisplays scharf bleibt, passen gute Spiele die Pixelzahl des Canvas an das Pixelverhältnis des Geräts an. Sonst wirkt alles leicht verschwommen.
Canvas oder SVG: Was ist der Unterschied?
| Merkmal | Canvas | SVG |
|---|---|---|
| Art | Pixelfläche | Vektorgrafik aus Formen |
| Gedächtnis | Merkt sich nur Pixel | Jede Form bleibt ein eigenes Objekt |
| Stärke | Sehr viele bewegte Objekte, Spiele | Scharfe Grafik in jeder Größe, Diagramme, Symbole |
| Vergrößern | Wird pixelig | Bleibt gestochen scharf |
Die Erklär-Animation auf dieser Seite ist übrigens ein SVG. Ein Spiel mit Hunderten Blasen oder Ziegeln zeichnet dagegen schneller auf einem Canvas.
Wofür eignet sich das Canvas besonders?
- 2D-Spiele mit vielen bewegten Teilen, etwa Bubble Shooter oder Ball-und-Schläger-Spiele.
- Pixel-Grafik: Mit abgeschalteter Glättung bleiben Pixel beim Vergrößern scharfkantig – ideal für Pixel-Art.
- Zeichnen mit Finger oder Maus, weil jede Bewegung direkt als Linie auf der Fläche landet.
- Grenze: Text auf dem Canvas ist für Screenreader unsichtbar. Gute Spiele legen Menüs und Knöpfe deshalb als normale HTML-Elemente darüber.
HTML5-Canvas in Spielen auf Player 0o5
Blasenknaller
Blasenknaller zeichnet alle Grafiken direkt im Spiel – für 50 Level in 5 Welten und einen Endlos-Modus, ohne Dateien von fremden Servern.
Kritzelkiste
In Kritzelkiste malst du mit Finger oder Maus: 18 Farben, vier Stiftgrößen, ein Füll-Werkzeug und ein Radierer stehen bereit, die anderen raten, was entsteht.
Ziegelbrecher
Ziegelbrecher bringt 40 Level in 4 Welten auf die Zeichenfläche. Am Handy wischst du irgendwo, und der Schläger folgt, ohne dass dein Finger ihn verdeckt.
Häufige Fragen zu HTML5-Canvas
Was ist ein Canvas in HTML?
Ein Canvas ist eine rechteckige Zeichenfläche auf einer Webseite. JavaScript malt darauf Formen, Bilder und Text, Pixel für Pixel.
Ist Canvas schneller als SVG?
Bei sehr vielen bewegten Objekten meist ja, weil das Canvas keine einzelnen Objekte verwalten muss. Für wenige, scharfe Formen wie Symbole oder Diagramme ist SVG oft die bessere Wahl.
Kann man auf dem Canvas 3D darstellen?
Ja, über WebGL. Dann zeichnet die Grafikkarte auf dieselbe Fläche, und es entstehen echte 3D-Szenen.
Warum sieht ein Canvas-Spiel unscharf aus?
Meist ist die Zeichenfläche kleiner als die echte Pixelzahl des Displays und wird hochgestreckt. Gute Spiele passen ihre Auflösung an das Pixelverhältnis des Geräts an.
Verwandte Begriffe
- Technik & PlattformWebGLWie kommt 3D in den Browser? WebGL lässt die Grafikkarte rechnen – aus Eckpunkten werden Dreiecke, aus Dreiecken Pixel.
- Technik & PlattformBildrate (FPS)30, 60 oder 120? Die Bildrate zählt, wie viele Bilder ein Spiel pro Sekunde zeichnet – und entscheidet, ob es flüssig läuft.
- Grafik & SoundPixel-ArtJedes Pixel zählt: Was Pixel-Art ausmacht, wie Figuren mit wenigen Farben entstehen und welche Spiele auf 0o5.de den Retro-Look pflegen.
- Genres & SpielartenBrowserspielAdresse öffnen und losspielen: Was ein Browserspiel ist, welche Webtechnik dahintersteckt und was es von Apps und Progressive Web Apps unterscheidet.
- Technik & PlattformTouch-SteuerungTippen, wischen, ziehen: So steuern Handyspiele ohne Tasten – mit Gesten und virtuellen Sticks.