Javascript API für HTML Canvas

Im Canvas ist kein DOM

Die Zeichnung auf dem Canvas ist kein Teil des DOM und kann keine klickbaren Bereiche enthalten (keine Links oder Maps, keine Positionsangaben). Bilder in einem Canvas können nicht wie SVG-Grafiken verlustfrei vergrößert und verkleinert werden.

Wozu also eine weitere Technik für Grafik, wo wir schon SVG haben?

Das Canvas-API besticht durch seine hohe Performance, da es sich die einzelnen Elemente der Zeichnung nicht merken muss. Javascript für Canvas ist Hardware-beschleunigt und vor allem für schnelle Animationen, Spiele, Zeichnen und 3D-Animationen (WebGL) bestimmt.

Freihandzeichnen und Malen mit Canvas

Zu den Kunststücken, die sich mit einem Canvas umsetzen lassen, gehören Zeichnen und Malen in Anwendungen und auf der Webseite im Browser.

Beispiel: Malen auf dem Canvas wie mit einem dicken Pinsel. Mal mal was:

Drei Events informieren über die Aktionen der Maus

• mousedown (linke Maustaste ist gedrückt)
• mouseup (Maustaste losgelassen)
• mousemove (Maus wird bewegt, egal, ob die Maustaste dabei gedrückt ist oder nicht)

Ein einfaches Tap auf dem Touchscreen wird als Mausklick interpretiert. Berührt der Finger auf dem iPad das Canvas-Element und bewegt sich dann, agiert der Touchscreen in seinem gewohnten Verhaltensmuster und scrollt die Seite. Das Script muss auf ein spezifisches Event des Touchpads horchen.

Entsprechend braucht der Touchscreen drei Touch-Events, um die Bewegung des Fingers in eine Zeichnung umzusetzen.

• touchstart
• touchmove
• touchend

Das kleine Script zeichnet mit Kreisen. Das erkennt man sofort, wenn man den Finger oder die Maus schnell auf dem Canvas bewegt. Ebensogut würden kleine Linien funktionieren.

Canvas = Bitmap

Die einzelnen Frames oder die Pixel eines im Canvas erzeugten Bildes lassen sich mit toDataURL als Bildmap-Bild in PNG oder JPEG speichern. Da hätten wir auch schon einen handfesten Grund für den Einsatz von Canvas: CSS und SVG können Bilder verändern, aber nicht als Bitmap speichern.

Mehr zu SVG oder HTML canvas?

<canvas id="canvas" width="600" height="200">
</canvas>

Javascript canvas ist auch Bestandteil von ePub3, dem Standard für eBooks.

Canvas Attribute und Funktionen

Javascript kann die HTML-Attribute des canvas-Tags programmatisch ändern – nicht anders als bei jedem HTML-Element. Das HTML canvas-Element selber ist Teil des DOMs – nicht aber sein Inhalt. Der Inhalt des canvas-Tags besteht aus Pixeln. Da gibt es keine Attribute, kein CSS.

Anwendungen von Javascript canvas sind wahre Monster an Code: Ganz schön viel Arbeit.

p5*js Grafik-Library für Javascript, guter Einstieg für Grafiker und Webdesigner, ist einfach zu lernen, gut dokumentiert und ist in aktiver Entwicklung.

Javascript-Librarys für HTML Canvas vereinfachen die Programmierung: calebevans.me/projects/jcanvas

Zeichnen mit Javascript

Das Bild im Canvas entsteht durch eine Serie von Anweisungen, die Striche (stroke) und Füllungen (fill) erzeugen.

let canvas = document.getElementById('canvas');
if (canvas && canvas.getContext) {
   let ctx = canvas.getContext("2d");
   if (ctx) {
      ctx.beginPath();
      ctx.strokeStyle = "#000";
      ctx.lineWidth = 32;
      ctx.arc(182,182,160,0,2*Math.PI);
      ctx.stroke();
   }
}

Canvas zu Bitmap (PNG): toDataURL

toDataURL wandelt die Zeichnung in einem canvas in ein Bitmap-Bild um. PNG ist das sicherste Format.

let png = document.createElement("img");
png.src = canvas.toDataURL("image/png");
document.querySelector("#myimage").appendChild(png);

Die Zeichnungen in einem Canvas lassen sich nicht verlustfrei verkleinern und insbesondere nicht vergrößern wie SVG-Grafiken. So gesehen kann es Sinn machen, die Grafik im Canvas groß mit einem ausreichend hohen Potential für Bitmap-Grafiken anzulegen.

Ein HTML-canvas wird mit einfachem CSS responsive:

.withcanvas canvas {
    display: block;
    width: 100%;
}
.withcanvas {
	position:relative;
	width:100%;
	margin-left: auto; margin-right: auto;
}

<div class="withcanvas" style="max-width:400px">
	<canvas id="rect" width="600" height="240"></canvas>
</div>

Canvas und Context

Javascript greift in drei Schritten auf den canvas zu:

1. Einen Verweis auf das canvas-Element erzeugen
   let canvas = document.getElementById ('canvas');
2. Den Zeichen-Zustand oder context setzen
   let ctx = canvas.getContext ("2d");
3. Ein Element (Form, Pfad, …) zeichnen

let canvas = document.getElementById('canvas');
if (canvas && canvas.getContext) {
   let ctx = canvas.getContext("2d");
   if (ctx) {
      ctx.fillStyle = "#9FC0D0";
      ctx.fillRect(0,0,ctx.canvas.width, ctx.canvas.height);
                    ^         ^                 ^
                    |         |                 |
                    |         |                 Höhe der Füllung
                    |         Breite der Füllung
                    Ursprung des Canvas
    }
}

Canvas kennt keinerlei Objekte – Javascript sieht den Inhalt eines Canvas nur als eine Serie von Pixeln.

Canvas Context

Jeder Context enthält einen Zustand – den Kontext der Zeichenfläche.

Der Zustand kann vom Script gespeichert und später wieder aktiviert werden: So entsteht eine History oder ein Protokoll des Zeichnungszustands. Die Zustände können in einem Stack gespeichert und später wieder abgerufen werden.

Der Drawing State verwaltet Eigenschaften des Canvas:

• aktueller Wert von lineWidth, strokeStyle, fillStyle, lineCap usw.
• aktuelle Transformations-Matrix
• aktueller Clipping-Bereich

Drawing State ist keine History oder Protokoll, wie wir es z.B. von Photoshop kennen.

Der Drawing State konserviert nicht die Zeichnung, sondern Breite und Farbe von Konturen und die Füllung von Objekten!

Javascript context.save () und context.restore () speichern einen Zeichen-Zustand bzw. aktivieren einen älteren Zustand, um den Zeichnungszustand wieder herzustellen.