HTML Canvas Text

Das HTML5-Element <canvas> ermöglicht es, Text direkt auf eine Bitmap-Oberfläche zu zeichnen. Anders als normaler DOM-Text wird Canvas-Text als Pixel gerendert — einmal gezeichnet, besitzt er kein Markup, kann nicht markiert, kopiert oder von Screenreadern gelesen werden und bricht nie um. Die Darstellung wird über den Zeichenkontext (getContext("2d")) gesteuert, nicht über CSS. Das macht Canvas-Text ideal für Grafiken, Diagramme, Spiel-UIs und die Bildgenerierung, aber ungeeignet für Fließtext.

Dieses Kapitel baut auf der Canvas-Einführung und den Zeichengrundlagen auf. Informationen zum Einfärben von Text mit Farbverläufen findest du unter Canvas-Farbverläufe.

Eigenschaften und Methoden

Eigenschaft / Methode	Beschreibung
font	Gibt die aktuellen Schrifteinstellungen zurück und kann gesetzt werden, um die Schrift zu ändern.
textAlign	Gibt die aktuelle Textausrichtung zurück und kann gesetzt werden, um die Ausrichtung zu ändern. Die Eigenschaft kennt folgende Werte: start, end, left, right und center. Dabei hängen start und end von der Textrichtung ab.
textBaseline	Gibt die aktuelle Grundlinienausrichtung zurück und kann gesetzt werden, um sie zu ändern. Die Eigenschaft kennt folgende Werte: top, hanging, middle, alphabetic, ideographic und bottom.
fillStyle	Legt die Farbe fest, mit der Text gefüllt wird.
strokeStyle	Legt die Farbe fest, mit der Text umrandet wird.
fillText(text, x, y [, maxWidth])	Zeichnet gefüllten Text an der durch die Koordinaten x und y angegebenen Position. Das optionale Argument `maxWidth` skaliert den Text so, dass er diese Breite in Pixeln nie überschreitet.
strokeText(text, x, y [, maxWidth])	Zeichnet den Umriss des Textes an der durch die Koordinaten x und y angegebenen Position. Akzeptiert ebenfalls das optionale Argument `maxWidth`.
measureText(text)	Gibt ein `TextMetrics`-Objekt zurück, dessen Eigenschaft `width` angibt, wie breit der Text mit der aktuellen `font`-Einstellung wäre. Nützlich zum Zentrieren, Umbrechen oder Anpassen von Text.

Die Eigenschaft `font`

Die Eigenschaft font akzeptiert denselben Wert wie die CSS-Kurzschreibweise font. Stil, Stärke, Größe und Familie lassen sich in einem einzigen String kombinieren, zum Beispiel "italic bold 18px serif". Wird nur Größe und Familie angegeben (z. B. "30px Arial"), werden die übrigen Werte auf ihre Standardwerte zurückgesetzt. Es müssen immer eine Größe und eine Familie angegeben werden — fehlt einer der beiden Werte, ist die Deklaration ungültig und die Änderung wird ignoriert.

ctx.font = "italic bold 18px serif";
ctx.font = "small-caps 24px 'Courier New', monospace";
ctx.font = "30px Arial"; // size + family only — also valid

Beispiel der Methode fillText():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World", 70, 80);
    </script>
  </body>
</html>

Probier es selbst »

Beispiel der Methode strokeText():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>

Probier es selbst »

Beispiel: Farbe hinzufügen und Text zentrieren:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.font = "40px Comic Sans MS";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
    </script>
  </body>
</html>

Probier es selbst »

Text ausrichten mit textAlign

Die x-Koordinate, die du an fillText/strokeText übergibst, ist der Ankerpunkt. Die Eigenschaft textAlign bestimmt, wie der Text relativ zu diesem Ankerpunkt positioniert wird. Der Standardwert ist "start", der der Textrichtung folgt — bei einem Links-nach-rechts-Text verhält er sich wie "left", bei einem Rechts-nach-links-Text wie "right". Bei "left" ist der Ankerpunkt der linke Rand; bei "center" wird der Text auf dem Ankerpunkt zentriert; bei "right" ist der Ankerpunkt der rechte Rand; "start" und "end" entsprechen den jeweiligen Rändern gemäß der Textrichtung.

Das folgende Beispiel zeichnet eine senkrechte Referenzlinie bei x = 150 und gibt dann drei Beschriftungen aus, die alle mit demselben x an unterschiedliche textAlign-Werte gebunden sind, sodass die jeweilige Positionierung des Textes sichtbar wird.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="160" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const x = 150;

      // Reference line at the anchor x
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, 160);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textAlign = "left";
      ctx.fillText("left", x, 40);

      ctx.textAlign = "center";
      ctx.fillText("center", x, 80);

      ctx.textAlign = "right";
      ctx.fillText("right", x, 120);
    </script>
  </body>
</html>

Text vertikal positionieren mit textBaseline

Die y-Koordinate wird relativ zur Grundlinie des Textes gemessen, und textBaseline legt fest, auf welchen Teil der Glyphen sich diese Grundlinie bezieht. Der Standardwert ist "alphabetic", bei dem y ungefähr auf der Unterkante von Buchstaben wie „x" liegt. Setze den Wert auf "top", um y als oberen Rand des Textes zu verwenden, oder auf "middle", um den Text vertikal auf y zu zentrieren — praktisch, wenn Text in einem Rechteck zentriert werden soll.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const y = 60;

      // Reference line at the anchor y
      ctx.strokeStyle = "#d3d3d3";
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(320, y);
      ctx.stroke();

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";

      ctx.textBaseline = "top";
      ctx.fillText("top", 10, y);

      ctx.textBaseline = "middle";
      ctx.fillText("middle", 90, y);

      ctx.textBaseline = "bottom";
      ctx.fillText("bottom", 200, y);
    </script>
  </body>
</html>

Text mit Umriss (strokeText + fillText)

Fill und Stroke lassen sich auf demselben Text kombinieren, um einen Umrisseffekt zu erzielen. Rufe zunächst fillText auf, um die Vollfarbe aufzutragen, dann strokeText darüber, damit der Umriss scharf bleibt. Über fillStyle, strokeStyle und lineWidth lässt sich das Erscheinungsbild steuern.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="360" height="120" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");

      ctx.font = "bold 60px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";

      const x = canvas.width / 2;
      const y = canvas.height / 2;

      ctx.fillStyle = "gold";
      ctx.fillText("Canvas", x, y);

      ctx.lineWidth = 2;
      ctx.strokeStyle = "black";
      ctx.strokeText("Canvas", x, y);
    </script>
  </body>
</html>

Text messen mit measureText()

measureText() gibt ein TextMetrics-Objekt zurück, das beschreibt, wie der Text mit der aktuellen font-Einstellung gerendert würde. Die am häufigsten verwendete Eigenschaft ist width: Sie kann von der Canvas-Breite abgezogen werden, um Text manuell zu zentrieren, oder mit einer verfügbaren Breite verglichen werden, um langen Text auf mehrere Zeilen aufzuteilen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="320" height="100" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      const text = "Measured!";

      ctx.font = "30px Arial";
      const metrics = ctx.measureText(text);

      // Center horizontally without changing textAlign
      const x = (canvas.width - metrics.width) / 2;
      ctx.fillText(text, x, 55);
    </script>
  </body>
</html>

Tipp: Wenn der Text lediglich in eine feste Breite passen soll, ist das optionale Argument maxWidth die einfachere Lösung — ctx.fillText("Long label", 10, 40, 120) verkleinert den Text so, dass er 120 Pixel nie überschreitet.

Übungen

Übung

Was bewirkt die Canvas-Methode 'fillText()'?

Sie umrandet den Text mit dem aktuellen strokeStyle.Sie misst nur die Breite des angegebenen Textes.Sie zeichnet den Text an den angegebenen Koordinaten, gefüllt mit dem aktuellen fillStyle.Sie zeichnet den Text, wendet aber keine Farbe an.Sie entfernt den Text vom Canvas.

Übung

Welche Eigenschaft steuert die horizontale Position des Textes relativ zur x-Koordinate?

Übung

Was gibt measureText('Hello') zurück?

Den String 'Hello', gezeichnet auf dem Canvas.Ein TextMetrics-Objekt, das die Breite des Textes enthält.Die Anzahl der Zeichen im Text.Die aktuelle Schriftgröße in Pixeln.Nichts - es setzt nur die Schriftart.

Übung

Welcher Wert ist eine gültige Einstellung für die Canvas-Eigenschaft 'font'?

Übung

Welchen Zweck hat das optionale Argument maxWidth von fillText()?

Es legt die Canvas-Breite fest.Es skaliert den Text so, dass seine gerenderte Breite den angegebenen Wert nicht überschreitet.Es ändert die Schriftgröße dauerhaft.Es bricht den Text automatisch auf mehrere Zeilen um.Es zentriert den Text horizontal.

Eigenschaften und Methoden

Die Eigenschaft font

Beispiel der Methode fillText():

Beispiel der Methode strokeText():

Beispiel: Farbe hinzufügen und Text zentrieren:

Text ausrichten mit textAlign

Text vertikal positionieren mit textBaseline

Text mit Umriss (strokeText + fillText)

Text messen mit measureText()

Übungen

Die Eigenschaft `font`