CSS, HTML und Javascript mit {stil}

HTML canvas »Programmierbares img-Tag«

HTML canvas

HTML5 canvas erzeugt eine Zeichenfläche, in die mit dem Javascript-canvas-API Grafiken und Bilder on-the-fly eingesetzt und animiert werden.

Der Inhalt des canvas ist (im Gegensatz zu SVG in einer HTML-Seite) kein Teil der Webseite. Das Javascript DOM (Document Object Model) kann nicht auf die Objekte in einem Canvas zugreifen.

HTML5 canvas kann per Javascript für canvas mit Text, Bildern, Formen wie Vierecken und Kreisen und Füllungen wie Verläufen gefüllt werden. Die Objekte im canvas lassen sich per JavaScript animieren.

Die modernen Browser unterstützen das canvas-Objekt – insbesondere auf den mobilen Geräten –, und auch IE 9 kann mit dem canvas aus HTML5 umgehen.

Auch wenn ältere Browser und IE8 HTML5 canvas nicht unterstützen: canvas, SVG, CSS und Javascript ersetzen heute Flash. HTML5 canvas wird von allen Browsern auf Smartphones und Tabletts unterstützt. Ein Blick auf die Technik mit dem canvas-Objekt lohnt sich.

Adobe Illustrator-Plugin für den Export von Grafik als Canvas

In HTML5 Canvas wird programmatisch gezeichnet. Das Speichern und Verwalten von Objekten innerhalb des Canvas wird mit Javascript programmiert.

HTML5 canvas oder SVG?

Warum ein weiteres Element, wenn wir doch SVG direkt in HTML5 einsetzen können? Eine Daumenregel für die Frage, ob besser SVG oder HTML5 Canvas und Javascript eingesetzt wird, ist

Grafik mit HTML5 canvas
  • Die Zeichnung ist kein Teil des DOMs und CSS wirkt nicht auf die Objekte innerhalb eines HTML canvas-Elements.
  • Die Zeichnung in einem Canvas wird aus Pixeln aufgebaut und lässt sich als Bitmap-Bild speichern.
  • canvas bringt keine eingebauten Animationen mit, aber das Zeichnen mit Javascript ist leistungsstark und schnell.
Grafik mit SVG
  • Die Elemente eines SVG-Objekts sind Teil des DOMs.
  • SVG wird mit Vektoren gezeichnet.
  • SVG hat eingebaute Effekte und Animationen.
  • XML-Syntax, hat große Ähnlichkeit mit HTML, ist etwas langsamer, aber besser zugreifbar.

Beispiel für HTML Canvas, die mit SVG nicht machbar sind

Canvas und SVG lassen sich kombinieren: Eine dynamische canvas-Animation kann z.B. über einem SVG-Hintergrund liegen. In ein Canvas läßt sich allerdings kein SVG zeichnen.

Darstellung des canvas-Elements

Das Koordinatensystem des canvas-Objekts beginnt oben links. Beim Laden der Seite hat das canvas keinen Hintergrund und ist unsichtbar.

Dieser Browser kann kein HTML5-canvas-Element darstellen

Dieser Canvas zeigt einen Rahmen und einen Hintergrund, die durch CSS zugewiesen sind. Der Hintergrund ist ein Raster von 20x20px. Ohne den Rahmen und den Hintergrund wäre das canvas-Element nur eine (unsichtbare) Box aus Pixeln.

<canvas id="myCanvas" width="600" height="180" 
        style="background:url(grid.png)">
   Dieser Browser kann kein HTML5-canvas-Element darstellen
</canvas>

<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(190,135,135)";
ctx.fillRect (20, 20, 200, 100);  // Rotes Viereck mit Ursprung (20,20)
ctx.fillStyle = "rgba(135,190,135,0.5)";
ctx.fillRect (80, 60, 300, 100);  // Grünes Viereck mit Ursprung (80,60)
</script>

In einer HTML-Seite dürfen mehrere canvas-Elemente sitzen und canvas-Elemente dürfen einander überlappen. So kann z.B. ein canvas den Hintergrund für ein Spiel bilden, ein anderes enthält die Sprites, ein drittes canvas die Steuerung.

HTML-Attribute für canvas

width
Breite des canvas in Pixeln (Vorgabe ist 300px)
height
Höhe des canvas in Pixeln (Vorgabe ist 150px)
toDataURL(type)
Wandelt den Inhalt des canvas in ein statisches Bild um. Der Parameter type legt den Typ fest (z.B. image/png)
getContext(ctxID)
Zeichen-Kontext des canvas

Alle Browser müssen image/png unterstützen, weitere Bild-Typen können unterstützt werden.