CanvasRenderingContext2D.fontVariantCaps — Eigenschaft · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.fontVariantCaps

Beschreibung

Die Eigenschaft fontVariantCaps des 2D-Kontexts bestimmt, ob und wie Text, der mit fillText() oder strokeText() gezeichnet wird, alternative Glyphen für Groß- und Kleinbuchstaben verwendet. Sie entspricht der CSS-Eigenschaft font-variant-caps und kennt dieselben Schlüsselwörter.

Mögliche Werte sind:

"normal" (Standard) – keine alternativen Glyphen.
"small-caps" – Kleinbuchstaben werden als Kapitälchen dargestellt.
"all-small-caps" – Groß- und Kleinbuchstaben werden als Kapitälchen dargestellt.
"petite-caps" / "all-petite-caps" – wie oben, aber mit noch kleineren „Petite Caps“, sofern die Schrift sie enthält.
"unicase" – Mischung aus Kapitälchen für Großbuchstaben und normalen Kleinbuchstaben.
"titling-caps" – spezielle Titel-Versalien für große Schriftgrößen.

Typische Einsatzgebiete sind typografisch anspruchsvolle Canvas-Grafiken wie Diagrammbeschriftungen, Urkunden, Spielmenüs oder generierte Vorschaubilder. Die Eigenschaft ist Teil des Zeichenzustands und wird daher von save() und restore() gesichert bzw. wiederhergestellt.

Parameter

Name	Typ	Default	Beschreibung
$value	"normal" \| "small-caps" \| "all-small-caps" \| "petite-caps" \| "all-petite-caps" \| "unicase" \| "titling-caps"	"normal"	Zuzuweisender Wert beim Setzen der Eigenschaft. Ungültige Zeichenketten werden stillschweigend ignoriert, der bisherige Wert bleibt erhalten.

Rückgabewert

Typ

string

Beschreibung

Der aktuell eingestellte Großschreibungsmodus als Zeichenkette, standardmäßig "normal".

Beispiele

Überschrift in Kapitälchen zeichnen

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

ctx.font = '32px Georgia';
ctx.fillText('Normaler Text', 10, 45);

ctx.fontVariantCaps = 'small-caps';
ctx.fillText('Kapitälchen-Text', 10, 95);
console.log(ctx.fontVariantCaps);

small-caps

Alle Varianten nebeneinander vergleichen

const canvas = document.createElement('canvas');
canvas.width = 420;
canvas.height = 260;
document.body.append(canvas);
const ctx = canvas.getContext('2d');
ctx.font = '22px serif';

const varianten = ['normal', 'small-caps', 'all-small-caps', 'petite-caps', 'all-petite-caps', 'unicase', 'titling-caps'];

varianten.forEach((v, i) => {
  ctx.fontVariantCaps = v;
  ctx.fillText(`${v}: Hallo Welt`, 10, 30 + i * 32);
});

Feature-Erkennung mit Rückfall und save()/restore()

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

const zeichneTitel = (text, x, y) => {
  ctx.save();
  ctx.font = '28px Georgia';
  if (unterstuetzt) {
    ctx.fontVariantCaps = 'all-small-caps';
    ctx.fillText(text, x, y);
  } else {
    // Rückfall: Großbuchstaben mit kleinerer Schrift
    ctx.font = '22px Georgia';
    ctx.fillText(text.toUpperCase(), x, y);
  }
  ctx.restore();
};

zeichneTitel('Jahresbericht 2024', 10, 40);
console.log(ctx.fontVariantCaps ?? 'nicht unterstützt');

normal (bzw. "nicht unterstützt" in Firefox)

Ungültige Werte werden ignoriert

const ctx = document.createElement('canvas').getContext('2d');
ctx.fontVariantCaps = 'small-caps';
ctx.fontVariantCaps = 'SMALL CAPS'; // ungültig
console.log(ctx.fontVariantCaps);

small-caps

// Wichtig · Fallstricke

Browser-Kompatibilität: Unterstützt in Chromium-Browsern (ab Version 99) und Safari 17+. Firefox unterstützt die Eigenschaft derzeit nicht – dort ist sie undefined, eine Zuweisung hat keine Wirkung. Vorher mit 'fontVariantCaps' in ctx prüfen.
Zusammenspiel mit font: Das Setzen von ctx.font setzt fontVariantCaps zurück bzw. überschreibt es mit dem im Font-String enthaltenen Wert (z. B. "small-caps 20px serif"). Deshalb fontVariantCaps immer nach font setzen.
Werte sind Groß-/Kleinschreibungs-sensitiv; ungültige Werte werden ohne Fehlermeldung ignoriert.
Enthält die Schrift keine echten Kapitälchen- oder Petite-Caps-Glyphen, synthetisiert der Browser sie (verkleinerte Versalien) oder fällt auf small-caps zurück; unicase und titling-caps wirken nur bei Schriften mit den passenden OpenType-Features.
Web-Fonts müssen vor dem Zeichnen geladen sein (z. B. über document.fonts.ready), sonst wird mit einer Ersatzschrift gerendert.

Siehe auch

CanvasRenderingContext2D.font CanvasRenderingContext2D.fontKerning CanvasRenderingContext2D.fontStretch CanvasRenderingContext2D.textRendering CanvasRenderingContext2D.fillText() CanvasRenderingContext2D