HTML5 Canvas: Einsteiger Tutorial Teil 4 - Text auf Canvas schreiben

In diesem HTML 5 Canvas Tutorial haben wir uns bisher damit beschäftigt, wie man das Canvas-Element in seine Website einbaut und darauf Linien, Rechtecke und Kreise zeichnet und farblich anpasst. In diesem Teil möchten wir einen Text auf dem HTML5 Canvas ausgeben.

• Teil 1: Einführung und Grundlagen
• Teil 2: Linien zeichnen
• Teil 3: Rechtecke und Kreise
• Teil 4: Text auf den Canvas schreiben

Ich empfehle zuerst den ersten Teil dieses Tutorials zu lesen wenn man noch nie mit dem HTML5 Canvas gearbeitet hat.

Text auf HTML 5 Canvas schreiben

In diesem Beispiel sehen wir, wie man einen Text auf den Canvas schreiben kann.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
  
context.font = "20px Verdana";      // Font Style
context.fillText("ABC", 100, 100);  // Text, x, y

Wir brauchen dafür nicht mehr als die Eigenschaft font und die Methode fillText().

Mit font können wir definieren, welche Schriftart und welche Schriftgröße für unseren Text verwendet werden soll.

Die Methode fillText schreibt den Text dann auf den Canvas. Als ersten Parameter übergeben wird den zu schreibenden Text (hier "ABC"), als zweiten und dritten Parameter die Position (hier der Punkt 100/100 auf dem Canvas).

Benutzen wir statt fillText() die Funktion strokeText() können wir nur die Umrandung des Textes zeichnen lassen.

Text ausrichten

Mit textAlign und textBaseline können wir unseren Text horizontal und vertikal ausrichten. Je nachdem, wie textAlign und textBaseline gesetzt sind, beziehen sich die übergebenen Koordinaten X und Y an einer anderen Stelle.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
   
context.font = "20px Verdana";      // Font Style
context.textAlign = "center";       // horizontal zentriert
context.textBaseline = "middle";    // vertikal zentriert
context.fillText("ABC", 100, 100);  // Text, x, y

In diesem Beispiel zentrieren wir den Text horizontal und vertikal. Das heißt, unsere Position 100/100 befindet sich genau in der Mitte des Textes und der Text wird mittig auf diesen Punkt geschrieben.

Andere Werte für textAlign sind "right" und "left", um den Text rechtsbündig oder linksbündig auszurichten.

Andere Werte für textBaseline sind "top" (Y-Position ist an der Oberkante), "bottom" (Y-Position ist an der Unterkante), "alphabetic" (Y-Position ist an der Baseline) und "hanging" (Y-Position befindet sich an der Oberseite).

Textbreite messen

Die Eigenschaften textBaseline und textAlign nehmen uns in der Regel die Arbeit ab, selber zu berechnen, wie ein Text platziert werden soll. Dennoch ist es in manchen Fällen noch erforderlich, zu wissen, wie breit oder wie hoch ein Text ist.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");

context.font = "20px Verdana";             // Font Style
var w = context.measureText("ABC").width;  // Breite

Mit measureText().width lässt sich die Breite des übergebenen Textes bestimmen. Vorher sollte man natürlich mit font den Font Style setzen, damit wir hier zu einem richtigen Ergebnis kommen. Die Höhe des Textes ist in dem Beispiel übrigens die 20px Angabe.