CanvasRenderingContext2D.strokeText() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.strokeText(text, x, y, maxWidth)

Beschreibung

strokeText() zeichnet einen Text als Kontur: Nur die Ränder der Buchstaben werden gezogen, das Innere bleibt leer. Das Gegenstück fillText() füllt die Zeichen dagegen aus. Häufig kombiniert man beide, um Text mit Umrandung darzustellen, etwa für Beschriftungen in Spielen, Memes oder Diagrammen, die auf jedem Hintergrund lesbar sein sollen.

Wie der Text aussieht, legen die Zustandseigenschaften des Kontexts fest: font (Schriftgröße und -familie), strokeStyle (Farbe, Verlauf oder Muster), lineWidth, lineJoin, textAlign, textBaseline und direction. Außerdem wirken die aktuelle Transformation, globalAlpha, Schatten und setLineDash().

Die Koordinaten x und y beziehen sich auf den Ankerpunkt des Textes. Welcher Punkt das ist, hängt von textAlign (waagerecht) und textBaseline (senkrecht, Standard "alphabetic") ab. Anders als strokeRect() verändert strokeText() den aktuellen Pfad nicht. Mit maxWidth wird der Text bei Bedarf waagerecht gestaucht oder eine schmalere Schrift gewählt, damit er in die angegebene Breite passt.

Parameter

Name	Typ	Beschreibung
$text Pflicht	string	Der zu zeichnende Text. Andere Werte werden in einen String umgewandelt. Zeilenumbrüche (`\n`) werden nicht umgesetzt, sondern wie Leerraum behandelt.
$x Pflicht	number	x-Koordinate des Ankerpunkts in Pixeln, bezogen auf das aktuelle Koordinatensystem.
$y Pflicht	number	y-Koordinate des Ankerpunkts (Grundlinie gemäß `textBaseline`) in Pixeln.
$maxWidth	number	Maximale Breite in Pixeln. Ist der Text breiter, wird er horizontal gestaucht. Bei `0`, negativen Werten, `NaN` oder `Infinity` wird nichts gezeichnet.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Das Ergebnis ist direkt auf der Canvas sichtbar.

Beispiele

Einfacher Kontur-Text

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

ctx.font = 'bold 48px sans-serif';
ctx.strokeStyle = '#1e40af';
ctx.lineWidth = 2;
ctx.strokeText('Hallo Canvas', 20, 70);

Lesbare Beschriftung: Kontur plus Füllung

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

const drawCaption = (text, x, y) => {
  ctx.font = 'bold 40px Impact, sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.lineJoin = 'round'; // verhindert spitze Zacken an Ecken
  ctx.lineWidth = 6;
  ctx.strokeStyle = 'black';
  ctx.strokeText(text, x, y); // erst Kontur ...
  ctx.fillStyle = 'white';
  ctx.fillText(text, x, y);   // ... dann Füllung darüber
};

drawCaption('GAME OVER', ctx.canvas.width / 2, ctx.canvas.height / 2);

Text in feste Breite zwängen mit maxWidth

const ctx = document.querySelector('canvas').getContext('2d');
ctx.font = '32px serif';
ctx.strokeStyle = 'crimson';

const label = 'Ein ziemlich langer Diagrammtitel';
console.log(Math.round(ctx.measureText(label).width));

// wird auf höchstens 200 px gestaucht
ctx.strokeText(label, 10, 50, 200);
// Hilfslinie zur Kontrolle
ctx.strokeRect(10, 60, 200, 1);

ca. 450 (abhängig von der Schrift)

Gestrichelte Kontur mit Farbverlauf

const ctx = document.querySelector('canvas').getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'magenta');
gradient.addColorStop(1, 'orange');

ctx.font = 'bold 64px sans-serif';
ctx.strokeStyle = gradient;
ctx.lineWidth = 2;
ctx.setLineDash([4, 3]);
ctx.strokeText('Neon', 20, 90);
ctx.setLineDash([]); // Zustand zurücksetzen

// Wichtig · Fallstricke

Kein Zeilenumbruch: \n wird ignoriert. Mehrzeiligen Text musst du selbst aufteilen und jede Zeile mit eigener y-Koordinate zeichnen. Die Breite einer Zeile misst du mit measureText().
Die Konturbreite geht nach innen und außen: lineWidth wird mittig auf den Umriss gelegt. Bei dicken Linien wird der Text deshalb unleserlich. Zeichne erst die Kontur und dann mit fillText() die Füllung darüber. Setze außerdem lineJoin = 'round', sonst entstehen an spitzen Ecken (z. B. bei „M“ oder „A“) störende Zacken.
Webfonts: Ist eine Schrift noch nicht geladen, zeichnet der Browser mit einer Ersatzschrift. Warte vorher mit await document.fonts.load('48px MeineSchrift').
Unscharfe Darstellung auf HiDPI-Bildschirmen: Skaliere die Canvas-Größe mit devicePixelRatio und rufe dann ctx.scale() auf.
Barrierefreiheit: Text auf einer Canvas ist für Screenreader und Suchmaschinen unsichtbar. Hinterlege wichtige Inhalte zusätzlich als Ersatzinhalt oder per ARIA.
Die Methode gibt es auch bei OffscreenCanvasRenderingContext2D, also auch in Web Workern. Sie wird seit vielen Jahren von allen gängigen Browsern unterstützt.

Siehe auch

CanvasRenderingContext2D.fillText() CanvasRenderingContext2D.measureText() CanvasRenderingContext2D.font CanvasRenderingContext2D.strokeStyle CanvasRenderingContext2D.textAlign CanvasRenderingContext2D.textBaseline CanvasRenderingContext2D.lineWidth CanvasRenderingContext2D