CanvasRenderingContext2D.font — Eigenschaft · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.font

Beschreibung

Die Eigenschaft font eines 2D-Kontexts bestimmt Schriftart, Größe, Stärke, Stil und Variante für alle folgenden Textoperationen auf dem Canvas. Der Wert wird als Zeichenkette in derselben Syntax wie die CSS-Kurzschreibweise font angegeben, z. B. "italic bold 20px Georgia, serif". Der Standardwert ist "10px sans-serif".

Der Wert gehört zum Zeichenzustand des Kontexts. Er wird also mit save() gesichert und mit restore() wiederhergestellt. Er wirkt sich auf fillText(), strokeText() und measureText() aus. Wer Text messen will, etwa zum Zentrieren oder für Zeilenumbrüche, muss font deshalb vor dem Messen setzen.

Ungültige Werte werden stillschweigend ignoriert, und der vorherige Wert bleibt erhalten. Beim Auslesen liefert der Browser eine normalisierte Form. Relative Einheiten wie em oder % werden bezogen auf die Schriftgröße des <canvas>-Elements aufgelöst. Ohne Bezug zum DOM, etwa bei OffscreenCanvas, gilt die Standardgröße von 10px.

Parameter

Name	Typ	Default	Beschreibung
$value	string	"10px sans-serif"	CSS-`font`-Kurzschreibweise: optional `font-style`, `font-variant`, `font-weight`, `font-stretch`, dann zwingend `font-size` (optional `/line-height`, wird ignoriert) und `font-family`.

Rückgabewert

Typ

string

Beschreibung

Die aktuell gesetzte Schriftangabe in normalisierter Form, z. B. "bold 24px Arial".

Beispiele

Schrift setzen und Text zeichnen

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

console.log(ctx.font); // Standardwert
ctx.font = 'bold 32px "Segoe UI", Arial, sans-serif';
ctx.fillStyle = '#333';
ctx.fillText('Hallo Canvas', 20, 50);
console.log(ctx.font);

10px sans-serif bold 32px "Segoe UI", Arial, sans-serif

Text horizontal zentrieren mit measureText()

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

ctx.font = '48px Georgia, serif'; // vor dem Messen setzen!
const { width } = ctx.measureText(text);
const x = (ctx.canvas.width - width) / 2;
ctx.fillText(text, x, ctx.canvas.height / 2);
console.log(`Textbreite: ${Math.round(width)}px`);

Textbreite: 209px (abhängig von Schrift und System)

Webfont erst nach dem Laden verwenden

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

const drawTitle = async () => {
  // Stellt sicher, dass die per @font-face definierte Schrift geladen ist
  await document.fonts.load('700 36px "Roboto"');
  ctx.font = '700 36px "Roboto", sans-serif';
  ctx.fillText('Dashboard', 10, 50);
};

drawTitle();

Ungültige Werte werden ignoriert, save/restore

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

ctx.font = '20px Arial';
ctx.font = 'bold Arial'; // ungültig: Größe fehlt
console.log(ctx.font);

ctx.save();
ctx.font = 'italic 12px monospace';
ctx.restore();
console.log(ctx.font);

20px Arial 20px Arial

// Wichtig · Fallstricke

Größe und Familie sind Pflicht: Angaben wie "bold Arial" oder "20px" sind ungültig und werden ohne Fehlermeldung ignoriert.
Webfonts: Ist eine per @font-face eingebundene Schrift noch nicht geladen, zeichnet der Browser mit der Ersatzschrift und aktualisiert das Bild später nicht. Deshalb vorher auf document.fonts.load() bzw. document.fonts.ready warten.
line-height in der Kurzschreibweise (16px/2) wird ignoriert. Zeilenabstände muss man selbst berechnen.
Familiennamen mit Leerzeichen gehören in Anführungszeichen, z. B. '"Times New Roman"'.
Hohe Pixeldichte: Die px-Angabe bezieht sich auf das Koordinatensystem des Canvas. Bei devicePixelRatio > 1 den Kontext mit scale() anpassen, sonst wirkt der Text unscharf.
Für Feineinstellungen gibt es in modernen Browsern zusätzlich letterSpacing, fontKerning und fontStretch. Die Unterstützung ist uneinheitlich, ältere Safari-Versionen fehlen.
Die Eigenschaft selbst wird von allen Browsern unterstützt und ist auch in OffscreenCanvasRenderingContext2D (z. B. in Web Workern) verfügbar.

Siehe auch

CanvasRenderingContext2D.fillText() CanvasRenderingContext2D.strokeText() CanvasRenderingContext2D.measureText() CanvasRenderingContext2D.textAlign CanvasRenderingContext2D.textBaseline CanvasRenderingContext2D FontFaceSet.load()