Webentwicklung: HTML Canvas Grundlagen

Wir schauen uns in diesem Tutorial die Grundlagen des HTML5-Canvas-Elements an. Es geht darum einfache Formen zu zeichnen und Bilder ganz oder als Ausschnitt in einem Canvas-Element darzustellen

Einfügen

Was ist das HTML5-Canvas überhaupt?

HTML-Canvas ist ein HTML-Element, das einen rechteckigen Bereich auf einer Webseite definiert. Anders als SVG (vektorbasiert) arbeitet Canvas direkt mit einzelnen Pixeln (Bitmap). Gezeichnete Figuren (wie ein Kreis oder Rechteck) sind kein eigenständiges Element im Document Object Model (DOM). Der Browser weiß nach dem Zeichnen nicht mehr, wo sich ein Objekt im Canvas befindet.

Canvas ist deal für Spiele, Animationen, Diagramme oder Echtzeit-Bildbearbeitung.

Wir benötigen also zuerst ein HTML Dokument in dem wir ein Canavas-Element definieren. Etwas CSS sorgt für ein Schachbrettmuster, das uns eine bessere Übersicht bei den weiteren kleinen Experimenten mit dem Canvas-Element geben soll.

<!DOCTYPE html><br><html lang="en"><br><br><head><br>    <meta charset="UTF-8"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <script defer src="main.js"></script><br>    <title>Canvas Grundlagen</title><br>    <style><br>        body{<br>            font-family: Arial, Helvetica, sans-serif;<br>        }<br><br>        canvas{<br>            width: 1440px;<br>            height: 2880px;<br>            background: repeating-conic-gradient(#f8f8f8 0 25%, #c5c5c5 0 50%) 0 0 / 20px 20px;<br>        }<br>    </style><br></head><br><br><body><br>    <h1>Tutorial: HTML5-Canvas Grundlagen</h1><br>    <canvas width="720" height="1440"></canvas><br></body><br><br></html>

Die Höhe und Breite wurde im obigen Quelltext direkt im Tag mit einer Breite (width) von 720px und einer Höhe (height) von 1440px festgelegt. Im CSS-Style wiederum wurden für die mit Breite 1440px und die Höhe mit 2880 px angegeben. Das Canvas wird also durch die CSS-Formatierung doppelt so groß gezeichnet.

Weiterhin ist ein JavaScript-Dokument "main.js" eingebunden. Das Tutorial beginnt also mit dieser Ausgangssituation:

Einfügen

Der Context

Das Canvas-Element selbst stellt nur den Platz bereit. Um darauf zu malen, müssen wir über JavaScript den sogenannten Zeichenkontext (Context) holen.

Der Kontext ist eine Art Malwerkzeug, das uns Befehle bereitstellt, um Linien, Formen, Texte oder Bilder zu zeichnen sowie Farben und verschiedene Eigenschaften festzulegen.

//Context holen<br>const canvas = document.querySelector('canvas');<br>const ctx = canvas.getContext('2d');

main.js

Einfügen

Rechteck zeichnen

Wir können nun die Konstante "ctx", die den Kontext hält, zum Zeichnen eines Rechtecks nutzen.

//gefülltes Rechteck<br>ctx.fillRect( 20, 20, 100, 150); //=> x , y, w(Breite), h(Höhe)

Die Anweisung "strokeRect" zeichnet den Rand des Rechtecks.

//nur Rechteck mit Rand<br>ctx.strokeRect( 140, 20, 100, 150); //=> x, y, w(Breite), h(Höhe)

Um einen rechteckigen Bereich zu löschen verwendet man "clearRect".

//Rechteckig Bereiche löschen<br>ctx.clearRect(40,40, 20,20);

Die Füllfarbe wird der Eigenschaft "fillStyle" zugewiesen. Diese Farbe wird für alle folgenden Zeichenaktionen weiter beibehalten.

//Füllfarbe bestimmen<br>ctx.fillStyle = "red";<br>ctx.fillRect( 20, 190, 100, 150);

Die Strichfarbe bestimmt die Property: "strokeStyle". Farbangaben sind als CSS-Farbname, Hex-Code oder CSS-Farbfunktion möglich. Zusätzlich bestimmen wir die Linienbreite mit Hilfe der Eigenschaft "lineWidth".

//Strichfarbe bestimmen<br>//Farbangaben z.b. "blue", "#0000ff", "rgb(0,0,255)", "rgba(0,0,255,0.7)"<br>ctx.strokeStyle = "blue"; <br>ctx.lineWidth= 10;<br>ctx.strokeRect( 140, 190, 100, 150);<br>

Die Funktion save() speichert die bisherigen Werte der verschieden Properties z.b. die Strichfarbe, die Linienbreite und vieles mehr. Im unteren Beispiel werden die bisherigen Einstellungen gespeichert und StrokeStyle anschließend verändert. Nach dem Ändern werden die bisherigen Einstellungen mit restore() wiederhergestellt.

ctx.save(); //Einstellungen speichern<br>ctx.strokeStyle = "green";<br>ctx.strokeRect( 260, 20, 100, 150);<br>ctx.restore();//Einstellungen zurück holen

Am Ende dieses Abschnitts ergibt sich dieses Bild:

Einfügen

Formen nach Pfaden zeichnen

Ein Pfad wird mit "beginPath" gefolgt von "moveTo" bzw. "lineTo" festgelegt. Falls der Pfad geschlossen werden soll, kann die Anweisung "closePath" verwendet werden. Anschließend zeichnen "fill" bzw. "stroke" die Füllung bzw. den Rand.

//Pfad zeichnen<br>ctx.beginPath(); //Pfad beginnt<br>  ctx.moveTo(400, 20);<br>  ctx.lineTo(550, 20);<br>  ctx.lineTo(550, 140);<br>ctx.closePath(); //Pfad geschlossen<br>ctx.fill(); //Füllung<br>ctx.stroke(); //Rand

Der obige Pfad zeichnet nun ein Dreieck hinzu. Im Bild sieht man nun auch die Wirkung der Anweisung "restore", denn die ursprüngliche Strichfarbe (blau) wurde wiederhergestellt.

Einfügen

Kreise zeichnen

Mit "arc" können Kreise gezeichnet werden. Dabei kann auch angegeben werden, ob gegen Uhrzeigerrichtung (counterclockwise) gezeichnet werden soll.

//Kreis zeichnen<br>ctx.beginPath();<br>//           x  , y , radius,   startAngle,   endAngle,    optional: counterclockwise<br>    ctx.arc(320, 240,    50,         0,      Math.PI * 2); <br>ctx.closePath();<br>ctx.stroke(); //Rand zeichnen<br>ctx.fill();   //Füllung zeichnen<br>

Mit der Angabe von "endAngle" und "startAngle" können Kreis auch nur teilweise gezeichnet werden. Die Winkel werden im Bogenmax angegeben, ein voll Umrundung geht als von 0 bis Pi * 2. Hier ein Halbkreis:

//Kreis teilweise zeichnen<br>ctx.beginPath();<br>    ctx.arc(460, 260,    50,         0,      Math.PI , true); //counterclockwise<br>ctx.lineCap= "round"; // möglich "round" | "butt" | "square"<br>ctx.stroke(); //Rand zeichnen

Mit "lineCap" wird der Linienabschluss bestimmt. Es ergibt sich bis hierher folgendes Bild:

Einfügen

Canvasgröße und Skalierung

Bei der Arbeit mit dem HTMLCanvas-Element gibt es einen fundamentalen Unterschied, der bei Anfängern oft zu unscharfen oder verzerrten Grafiken führt: Die Unterscheidung zwischen der internen Zeichenfläche und der Anzeigegröße.

Die Koordinatengröße (Zeichenfläche) wird direkt über die HTML-Attribute width und height definiert in diesem Tutorial sind das 720px mal 1440px. Hier wird bestimmt, wie viele Pixel zum Zeichnen zur Verfügung stehen. Der Standardwert ist 300 × 150 Pixel.

Die Anzeige-Größe (CSS-Größe) wird über CSS definiert, in diesem Tutorial sind das 1440px mal 2880px. Unsere Anzeige ist also doppelt so groß, wie die Zeichenfläche.

Es ist also wichtig beide Größen (Zeichenfläche und CSS-Größe) aufeinander abgestimmt zu bestimmen. Ansonsten kann das zu verzerrten, unscharfen oder verpixelten Grafiken führen.

Die CSS-Eigenschaft "image-rendering" bestimmt, wie der Browser das Canvas-Element hochskaliert (vergrößert) oder herunterskaliert. Das ist besonders wichtig, wenn die interne Zeichenfläche kleiner ist als die Anzeige-Größe im CSS. Durch Änderung dieser Eigenschaft im Style zu pixelated erscheinen unsere Formen schon um einiges schärfer.

image-rendering: pixelated; // auch möglich: auto oder crisp-edges

Einfügen

Kreise und Bögen mit Pfaden verbinden

Kreise und Linien lassen sich auch einfach miteinander verbinden. Wir können auch die Art der Verbindung an den Schnittstellen durch "lineJoin" bestimmen.

//Kombination aus Kreis und Linien<br>ctx.beginPath();<br>   ctx.arc(80, 400, 40, 0, Math.PI, true ); <br>   ctx.lineTo(40,600);<br>   ctx.lineTo(120,600);<br>ctx.closePath(); <br><br>//Art der Verbindung an Schnittstellen<br>ctx.lineJoin = "bevel"; // "round" | "miter" | "bevel"<br>ctx.stroke(); //Rand zeichnen

Es ist mit "arcTo" auch möglich einen Kreisboden in den Pfad zu zeichnen.Zuvor legen wir fest, wie die Linie gestrichelt gezeichnet werden soll. Dazu wird ein Array mit der Strichlänge und dem Abstand zwischen den Strichen an die Anweisung "setLineDash" übergeben.

//gestrichelte Linie definieren<br>ctx.setLineDash([20,20]);<br><br>//Kreisbogen in Pfad zeichnen<br>ctx.beginPath();<br>    ctx.moveTo(140, 360);<br>    ctx.lineTo(250, 360);<br>    ctx.arcTo(300, 360, 300, 470, 50);<br>    ctx.lineTo(300, 600);<br>ctx.stroke();

Kurven können auch noch freier als Bezierkurve gezeichnet werden. Sie dazu Bezierkurve auf Wikipedia

//Bezierkurve in Pfad zeichnen<br>   ctx.beginPath();<br>   ctx.moveTo(320, 360);<br>   ctx.lineTo(500, 360);<br>   ctx.bezierCurveTo(420, 500, 600, 460, 600,360);<br>   ctx.lineTo(700, 360);<br>   ctx.stroke();

Am Ende dieses Abschnitts ergibt sich folgendes Bild mit Pfaden und verschiedenen Bögen, die teilweise gestrichelt dargestellt werden.

Einfügen

Farbverlauf

Auch Farbverläufe sind natürlich im Canvas möglich. Hier ein Beispiel mit LinearGradient. Der erzeugte Farbeverlauf wird einfach der "fillStyle"-Property zugewiesen.

//Farbverlauf<br>const gradient = ctx.createLinearGradient(15,630, 420,670);<br>//color stops hinzufügen<br>gradient.addColorStop(0, "blue");<br>gradient.addColorStop(0.5, "silver");<br>gradient.addColorStop(1, "blue");<br>ctx.fillStyle = gradient;<br>ctx.fillRect(15,630,420,100);

Einfügen

Texte zeichnen

Am Ende darf natürlich Text nicht fehlen, denn auch das kann HTML-Canvas. Um den Text den gestrichelt zu zeichen, wird das LineDash-Array wieder leer gemacht. Hier nur ein paar Grundlagen, es gibt noch viel mehr Möglichkeiten.

//Text zeichnen<br>ctx.fillStyle ="#ff3030";<br>ctx.font = "bold 60px Tahoma"; //"fontWeight fontSize fontFamily"<br>ctx.fillText("HTML Canvas", 20,700)<br><br>ctx.setLineDash([]); //lineDash löschen<br>ctx.textAlign = "center" //"left" | "right" | "center"<br>ctx.lineWidth = 3;<br>ctx.strokeStyle = gradient; //gradient als StrokeStyle<br>ctx.strokeText("Grundlagen", 220,800);

Unser Bild wird nun noch um einen Farbverlauf und um Text ergänzt:

Einfügen

Bilder zeichnen

Beim Zeichnen von Bildern auf einem HTML Canvas gibt es drei wesentliche Aspekte: das Laden, die Performance und die Skalierung/Positionierung. Das wichtigste Werkzeug hierfür ist die Anweisung "drawImage".

Bilder können in Originalgröße, skaliert oder auch als Ausschnitt gezeichnet werden. Im Beispiel wird das Cover dieses Tutorials komplett ins Canvas gezeichnet. Wichtig ist hier, dass erst gezeichnet wird, wenn das Bild vollständig geladen ist, daher wir erst auf den Event onload gezeichnet.

//Bild zeichnen in voller Größe<br>const img = new Image();<br>img.src = 'cover.jpg';<br><br>// Wichtig: Erst zeichnen, wenn das 'load'-Event feuert!<br>img.onload = function() {<br>    ctx.drawImage(img, 20, 1000); //=> img, x ,y<br>};<br>

Da das Bild für die Zeichenfläche zu groß ist, wird das Bild nur teilweise dargestellt. Gut, dass wir mit weiteren Parametern von "drawImage" auch skaliert zeichnen können.

//Bild zeichnen skaliert<br>const img = new Image();<br>img.src = 'cover.jpg';<br><br>// Wichtig: Erst zeichnen, wenn das 'load'-Event feuert!<br>img.onload = function() {<br>     ctx.drawImage(img, 20, 1000, 640, 360);//=> img, x, y,width, height<br>};

Es ist auch möglich, nur einen Teil des Quellbildes auszuschneiden und skaliert ins Canvas zu zeichnen. Das ist ideal für Spritesheets in Spielen.

<br>img.onload = function() {<br>    // Parameter für die QUELLE (Ausschnitt aus dem Bild)<br>    const sx = 64;  // Start bei X=64 (überspringt den ersten Frame)<br>    const sy = 0;   // Start bei Y=0 (oberste Reihe)<br>    const sw = 64;  // Der Ausschnitt ist 64 Pixel breit<br>    const sh = 64;  // Der Ausschnitt ist 64 Pixel hoch<br><br>    // Parameter für das ZIEL (Platzierung auf dem Canvas)<br>    const dx = 20;  // X-Position auf dem Canvas<br>    const dy = 1300;  // Y-Position auf dem Canvas<br>    const dw = 128; // Auf dem Canvas 128px breit zeichnen (2x Vergrößerung)<br>    const dh = 128; // Auf dem Canvas 128px hoch zeichnen (2x Vergrößerung)<br><br>    // Das Zeichnen des Ausschnitts<br>    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);<br>};

Einfügen

Fazit: Canvas Grundlagen

HTML Canvas ist ein mächtiges Werkzeug mit vielen Funktionen, um Grafik zu zeichnen und dabei jeden Pixel im Griff zu haben. Das Tutorial deckt nur die wichtigsten Funktionen ab. Ein weiteres Tutorial über die pixelgenau Manipulation der Bilddaten im Canvas folgt bald.

Einfügen

Webentwicklung: HTML Canvas Grundlagen

Was ist das HTML5-Canvas überhaupt?

Der Context

Rechteck zeichnen

Formen nach Pfaden zeichnen

Kreise zeichnen

Canvasgröße und Skalierung

Kreise und Bögen mit Pfaden verbinden

Farbverlauf

Texte zeichnen

Bilder zeichnen

Fazit: Canvas Grundlagen

Ist Elektronik und Arduino dein Ding?

Lernen macht hungrig oder? Dann koch dir doch was mit Hello Fresh!

Interesse an Smart Home, aber günstig? Dann los, ELV hat da was!

Dein Feedback ist uns wichtig

Bei Weitergabe bitte beachten