CSS, HTML und Javascript mit {stil}

HTML canvas »Programmierbares img-Tag«

Canvas ist das Pendant zur SVG-Grafiken: Canvas erzeugt Bitmaps mit Javascript

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 auf Github

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-Element den Hintergrund für ein Spiel bilden, ein anderes enthält die Sprites, ein drittes canvas-Element 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.

3D Rendering in HTML canvas

WebGL ist die Umsetzung von 3D-Grafik im canvas-Element. Anstelle der Initialisierung var ctx = canvas.getContext('2d') tritt

canvas.getContext("webgl");

WebGL basiert auf OpenGL und bringt 3D-Grafik und -Rendering ohne Browser-Plugin in die Webseite.

<canvas> </canvas>