HTML canvas – programmierbares img-Tag

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

Das HTML-canvas-Element zieht eine Zeichenfläche auf, in der Javascript Grafiken, Bilder und Zeichnungen on the fly erzeugen und animieren kann. Anders als SVG sind Canvas-Grafiken Bitmaps und keine Vektorgrafik.

Der Inhalt des canvas ist (ebenfalls 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 wird per Javascript für canvas mit Text, Bildern, Formen wie Vierecken und Kreisen und Verläufen gefüllt. Die Objekte im canvas lassen sich per JavaScript animieren.

Die modernen Browser unterstützen das canvas-Objekt, schon IE 9 konnte mit dem HTML Canvas umgehen.

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? Die Daumenregeln, ob besser SVG oder HTML5 Canvas und Javascript eingesetzt wird, sind

Grafik mit HTML5 canvas
  • Die Zeichnung ist kein Teil des DOMs: CSS wirkt nicht auf die Objekte in einem canvas.
  • Die Zeichnung im Canvas besteht aus Pixeln und lässt sich als Bitmap-Bild speichern.
  • canvas bringt keine eingebauten Animationen mit, aber Zeichnen mit Javascript ist leistungsstark und schnell.
Grafik mit SVG
  • Die Elemente eines SVG-Objekts sind Teil des DOMs, CSS funktioniert wie bei HTML.
  • SVG wird mit Vektoren gezeichnet.
  • SVG hat eingebaute Effekte und Animationen.
  • Die SVG-Syntax ähnelt HTML, ist etwas langsamer als ein canvas, aber besser zugreifbar.

Für Frontend-Entwickler ist SVG schon aufgrund seiner Ähnlichkeit mit HTML und dem Einsatz von CSS für Animationen einfacher. Für Spiele-Programmierung ist canvas effizienter, eben weil es nicht dem DOM unterliegt.

Canvas und SVG lassen sich kombinieren: Eine dynamische canvas-Animation kann z.B. über einem SVG-Hintergrund liegen. In ein Canvas läßt sich kein SVG zeichnen, aber in einem Canvas kann eine SVG-Grafik als Bild geladen werden.

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.

Canvas responsive

Ein Canvas-Element zieht seine Fläche immer im Seitenverhältnis auf, wenn eine Dimension geändert wird. Canvas ist also wunderbar responsive, aber weil Canvas Pixel für Pixel ein Bitmap-Bit erzeugt, werden die Pixel genauso sichtbar wie bei der Vergrößerung eines JPEG- oder PNG-Bildes.

CSS
.responsive { 
  width: 100%; 
  max-width: 500px;
}
.responsive canvas { 
  width: 100%; 
}
HTML
<div class="responsive">
  <canvas id="responsive" width="300" height="200">
  </canvas>
</div>

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 optional 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>