CSS, HTML & Javascript mit {stil}

HTML canvas – programmierbares img-Tag

Das HTML-canvas-Element zieht eine Zeichenfläche auf, in der Javascript Grafiken, Bilder und Zeichnungen on the fly erzeugen und animieren kann. Der Inhalt des Canvas ist (ebenfalls im Gegensatz zu SVG) kein Teil der Webseite, hier wirken keine HTML-Elemente und CSS kann nicht angewendet werden.

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

Malen und Zeichnen per Programm statt Pinsel

Ohne Javascript ist ein HTML Canvas-Element das pure NICHTS. In einem Canvas wird programmatisch gezeichnet, verwaltet und gespeichert. Erst Javascript für canvas füllt ein Canvas-Element mit Text, Bildern, Formen wie Vierecken und Kreisen und Verläufen. Die Objekte im Canvas lassen sich per JavaScript animieren.

Alle modernen Browser unterstützen das canvas-Objekt, schon IE 9 konnte mit dem HTML Canvas umgehen, und mit wenigen Zeilen Javascript malt die Maus oder der Finger ein Bild, das der Benutzer herunterladen kann. Mal mal was …

Einfaches HTML-Canvas-Element als Sketchpad
Zeichnen mit der Maus am Desktop oder dem Finger auf dem Touchscreen

Anders als mit SVG entstehen in einem HTML Canvas Bitmaps und keine Vektorgrafik. Die Zeichnung in einem HTML Canvas (sei es nun eine Malerei oder eine von Javascript erzeugte Bitmap) lässt sich in ein PNG umwandeln und der Benutzer kann das Bild herunterladen.

Canvas oder SVG?

Warum ein weiteres Element, wenn wir doch SVG direkt in HTML einsetzen können? Die Daumenregeln, ob besser SVG oder ein HTML-canvas-Element und Javascript eingesetzt wird, sind

Grafik mit HTML 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 wie in 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 intuitiver und barrierefrei.

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.

Im Grunde genommen ist es eine Frage der Anwendung: In einem Canvas kann im Browser gezeichnet und gemalt werden wie in einem Illustrationsprogramm, in einem Canvas können Bilder bearbeitet werden wie in einem Bildbearbeitungsprogramm. SVG kann Graphen und Karten aus dynamischen Daten dargestellt werden. Beides – Canvas und SVG – haben ihre speziellen Einsatzbereiche.

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 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="canvas" 
        width="500" 
        height="180" 
        style="background-image: url('grid.png')"></canvas>

Javascript canvas Tag: Rechteck mit Schatten

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = 'pink';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur    = 5;
ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(5,5,60,150);
</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 responsiv, 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%;
  aspect-ratio: 300/200;
}

<div class="responsive">
  <canvas id="responsive" width="300" height="200">
  </canvas>
</div>

Eine weitere Lösung für ein responsives Canvas-Element ist die CSS-transform-Eigenschaft.

@media (max-width: 499px) {
	canvas {
		transform: scale(0.5)
	}
}

@media (min-width: 500px) {
	canvas {
		transform: scale(1)
	}
}

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.

Suchen auf mediaevent.de