HTML5 Canvas: Text auf einem Punkt horizontal und vertikal zentrieren

In diesem Tutorial möchte ich euch zeigen, wie ihr einen Text auf einem HTML 5 Canvas horizontal und vertikal zentrieren könnt. Mit anderen Worten soll der Text genau mittig auf einem gegebenen Punkt liegen.

Im HTML definieren wir uns dazu zunächst einen Canvas (hier mit einer Größe von 200 x 200 Pixeln) auf dem wir später unseren Text ausgeben möchten.

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

Und fügen folgendes JavaSkript hinzu, das für das Schreiben des Textes verantwortlich ist:

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

var x = 100;
var y = 100; 

context.font         = '20px Verdana';
context.fillStyle    = '#000000';
context.textAlign    = 'center';
context.textBaseline = 'middle'; 

context.fillText('Text', x, y);

Wir möchten den Text genau mittig auf unserem 200 x 200 Pixel großen Canvas platzieren. Dies entspricht dem Punkt 100/100 im Koordinatensystem, den wir im Beispiel zunächst über die Variablen x und y definieren.

Anschließend legen wir über context.font und context.fillStyle die Schriftgröße, die Schriftart und die Schriftfarbe fest. Im Beispiel nehmen wir die Schriftart Verdana in einer Größe von 20px und geschrieben mit schwarzer Farbe (#00000).

Die eigentliche Zentrierung erfolgt in den nächsten beiden Zeilen. Über die Eigenschaft textAlign lässt sich die horizontale Ausrichtung steuern, über textBaseline die vertikale. Indem wir die horizontale Ausrichtung auf "center" und die vertikale Ausrichtung auf "middle" setzen, wird unser Text genau mittig auf den übergebenen Koordinaten zentriert.

Die Ausgabe des Textes auf unserem HTML5 Canvas erfolgt anschließend über fillText. Dieser Funktion übergeben wir unseren Text (hier "Text") und die Koordinaten (hier x = 100 und y = 100). Die Funktion benutzt immer die zuletzt definierten Anweisungen für Text und Ausrichtung.

Andere Eigenschaften von textAlign und textBaseline

Neben "center" kann man die horizontale Ausrichtung auch auf "left" oder "right" setzen, um den Text an der x-Koordinate anfangen oder enden zu lassen.

Die vertikale Ausrichtung mit textBaseline kann auch auf "bottom" oder "top" gestellt werden, um den Text oben oder unten an seiner kompletten Höhe auszurichten. "alphabetic" und "hanging" richten den Text dagegen von unten oder von oben an der Höhe von Buchstaben wie a, c oder e aus und "ideographic" an der ideographischen Baseline unterhalb der alphabetischen.