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:
Einfaches HTML-Canvas-Element als Sketchpad
Zeichnen mit der Maus am Desktop oder dem Finger auf dem Touchscreen
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.
Attribute/Funktionen | Beschreibung |
---|---|
width | Breite des canvas in Pixeln (default: 300) |
height | Höhe des canvas in Pixeln (default: 150) |
toDataURL(type) | Wandelt den Inhalt des canvas in ein statisches Bild um (image/png ist der Standard, den jeder Browser unterstützen muss) |
getContext(ctxID) | Der Zeichen-Kontext des canvas-Elements |
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:
CSS für responsiven Canvas
.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:
- Einen Verweis auf das canvas-Element erzeugen
let canvas = document.getElementById ('canvas'); - Den Zeichen-Zustand oder context setzen
let ctx = canvas.getContext ("2d"); - 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.
Eigenschaften des context | Beschreibung |
---|---|
fillStyle | Stil der Füllung: CSS-Farbe, Verlauf (Gradient), Muster (Pattern) |
strokeStyle | Stil der Kontur: CSS-Farbe, Verlauf (Gradient), Muster (Pattern) |
lineWidth | Breite der Kontur (default: 1) |
lineCap | Rundung am Anfang und Ende eines Pfads / stroke |
shadowColor | Schattenfarbe |
shadowBlur | Weichzeichnung des Schattens |
shadowOffsetX / shadowOffsetY | Abstand des Schattens |
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.