CanvasRenderingContext2D.textAlign — Eigenschaft · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.textAlign

Beschreibung

Die Eigenschaft textAlign bestimmt, an welcher Stelle des Textes der x-Wert liegt, den man fillText() oder strokeText() übergibt. Der Text wird also nicht innerhalb eines Kastens ausgerichtet. Die x-Koordinate dient als Ankerpunkt: Bei "center" liegt die Mitte des Textes auf x, bei "right" endet der Text dort.

Mögliche Werte:

"start" (Standard) – Ausrichtung am Zeilenanfang, abhängig von der Schreibrichtung (direction): bei ltr links, bei rtl rechts.
"end" – Ausrichtung am Zeilenende, ebenfalls abhängig von der Schreibrichtung.
"left" – Der Text beginnt bei x.
"right" – Der Text endet bei x.
"center" – Der Text wird um x herum zentriert.

Typische Einsatzgebiete sind zentrierte Beschriftungen in Diagrammen, rechtsbündige Zahlenspalten, Beschriftungen von Achsen und Buttons in Spielen. Zusammen mit textBaseline lässt sich Text sowohl horizontal als auch vertikal genau positionieren.

Die Eigenschaft gehört zum Zeichenzustand des Kontexts. Sie wird also von save() gesichert und von restore() wiederhergestellt.

Parameter

Name	Typ	Default	Beschreibung
$value	"start" \| "end" \| "left" \| "right" \| "center"	"start"	Neue Ausrichtung beim Setzen. Ungültige Werte werden stillschweigend ignoriert, der bisherige Wert bleibt dann erhalten.

Rückgabewert

Typ

string

Beschreibung

Die aktuelle Ausrichtung als einer der Werte "start", "end", "left", "right" oder "center".

Beispiele

Alle Ausrichtungen an einer Hilfslinie vergleichen

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 220;
document.body.append(canvas);
const ctx = canvas.getContext('2d');

const x = 200;
// Senkrechte Hilfslinie für den Ankerpunkt
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = '20px sans-serif';
const aligns = ['start', 'end', 'left', 'right', 'center'];
aligns.forEach((align, i) => {
  ctx.textAlign = align;
  ctx.fillText(`textAlign = "${align}"`, x, 40 + i * 40);
});

Text in der Canvas-Mitte zentrieren

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.font = 'bold 32px system-ui';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; // auch vertikal zentrieren
ctx.fillStyle = '#333';
ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);

Rechtsbündige Zahlenspalte in einer Tabelle

const ctx = document.querySelector('canvas').getContext('2d');
const posten = [
  { name: 'Miete', betrag: 850 },
  { name: 'Strom', betrag: 72.5 },
  { name: 'Internet', betrag: 39.99 }
];
const fmt = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });

ctx.font = '16px monospace';
posten.forEach(({ name, betrag }, i) => {
  const y = 30 + i * 24;
  ctx.save();
  ctx.textAlign = 'left';
  ctx.fillText(name, 10, y);
  ctx.textAlign = 'right'; // Beträge enden alle bei x = 290
  ctx.fillText(fmt.format(betrag), 290, y);
  ctx.restore();
});

Ungültige Werte werden ignoriert

const ctx = document.createElement('canvas').getContext('2d');

console.log(ctx.textAlign);
ctx.textAlign = 'center';
ctx.textAlign = 'middle'; // ungültig, kein Fehler
console.log(ctx.textAlign);

start center

// Wichtig · Fallstricke

Häufiger Fehler: "middle" ist kein gültiger Wert für textAlign, sondern nur für textBaseline. Für die horizontale Mitte verwendet man "center". Ungültige Werte lösen keine Ausnahme aus, sondern werden einfach ignoriert.
"start" und "end" hängen von ctx.direction ab. Dessen Standardwert "inherit" übernimmt die Richtung vom <canvas>-Element bzw. vom Dokument. Bei arabischen oder hebräischen Seiten bedeutet "start" daher rechts. Für eine feste Ausrichtung nimmt man "left" oder "right".
textAlign wirkt sich auch auf die Werte aus, die measureText() zurückgibt (actualBoundingBoxLeft/Right). Sie beziehen sich auf den Ankerpunkt.
Einen automatischen Zeilenumbruch gibt es in der Canvas-API nicht. Mehrzeiligen Text muss man selbst aufteilen und Zeile für Zeile mit der gewünschten Ausrichtung zeichnen.
Die Eigenschaft wird in allen modernen Browsern unterstützt, auch in OffscreenCanvasRenderingContext2D (etwa in Web Workern).

Siehe auch

CanvasRenderingContext2D.textBaseline CanvasRenderingContext2D.direction CanvasRenderingContext2D.font CanvasRenderingContext2D.fillText() CanvasRenderingContext2D.strokeText() CanvasRenderingContext2D.measureText() CanvasRenderingContext2D