Signatur
Beschreibung
Mit fontStretch wählst du die Laufweite der Schrift (Schriftbreite) für alle folgenden Aufrufe von fillText(), strokeText() und measureText(). Die Eigenschaft entspricht der CSS-Eigenschaft font-stretch, akzeptiert auf dem Canvas aber nur Schlüsselwörter und keine Prozentwerte.
Erlaubte Werte sind "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal" (Standard), "semi-expanded", "expanded", "extra-expanded" und "ultra-expanded". Ungültige Werte werden stillschweigend ignoriert, der bisherige Wert bleibt dann erhalten.
Praktisch ist das vor allem bei Diagrammbeschriftungen, Tabellen oder Überschriften, bei denen viel Text in wenig Platz passen muss. Sichtbar wird der Effekt aber nur, wenn die verwendete Schrift tatsächlich schmale oder breite Schnitte mitbringt, also eine Variable Font mit wdth-Achse oder eine Schriftfamilie mit eigenen Condensed- bzw. Expanded-Schnitten. Die Breite wird nicht künstlich gestreckt.
Die Eigenschaft gehört zum Zeichenzustand. Du kannst sie also mit save() sichern und mit restore() zurücksetzen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | "normal" | Das Schlüsselwort für die Schriftbreite, das beim Setzen zugewiesen wird. Prozentwerte wie "75%" sind nicht erlaubt und werden ignoriert. |
Rückgabewert
"normal".Beispiele
Alle Schriftbreiten nebeneinander vergleichen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const widths = ['ultra-condensed', 'condensed', 'normal', 'expanded', 'ultra-expanded'];
ctx.font = '24px "Roboto Flex", sans-serif'; // Variable Font mit wdth-Achse
widths.forEach((w, i) => {
ctx.fontStretch = w;
ctx.fillText(`Umsatz 2024 (${w})`, 10, 40 + i * 36);
});
console.log(ctx.fontStretch);Beschriftung schmaler machen, wenn sie zu breit ist
const ctx = document.querySelector('canvas').getContext('2d');
ctx.font = '16px "Roboto Flex", sans-serif';
const drawLabel = (text, x, y, maxWidth) => {
ctx.save();
const steps = ['normal', 'semi-condensed', 'condensed', 'extra-condensed', 'ultra-condensed'];
for (const step of steps) {
ctx.fontStretch = step;
if (ctx.measureText(text).width <= maxWidth) break;
}
ctx.fillText(text, x, y);
ctx.restore(); // fontStretch wieder auf den vorherigen Wert
};
drawLabel('Durchschnittliche Bearbeitungszeit', 20, 50, 180);
console.log(ctx.fontStretch);Unterstützung prüfen und ungültige Werte erkennen
const ctx = document.createElement('canvas').getContext('2d');
if ('fontStretch' in ctx) {
ctx.fontStretch = '75%'; // Prozentwerte werden ignoriert
console.log(ctx.fontStretch);
ctx.fontStretch = 'condensed';
console.log(ctx.fontStretch);
} else {
console.log('fontStretch wird nicht unterstützt');
}// Wichtig · Fallstricke
- Browser-Kompatibilität: Unterstützt ab Chrome/Edge/Opera 99. Firefox und Safari bieten die Eigenschaft nicht oder nur eingeschränkt an. Prüfe deshalb vorher mit
'fontStretch' in ctxund plane einen Ersatz ein, z. B. über eine andere Schriftfamilie inctx.font. - Kein sichtbarer Effekt? Die Schrift muss passende Breitenschnitte haben (Variable Font mit
wdth-Achse oder eigene Condensed- bzw. Expanded-Dateien). Ohne diese Schnitte sieht der Text genauso aus wie bei"normal". - Webfonts laden: Warte vor dem Zeichnen auf
document.fonts.readyoderdocument.fonts.load(). Sonst wird mit einer Ersatzschrift gezeichnet. - Zusammenspiel mit
font: Die Kurzschreibweisectx.fontkann ebenfalls ein Breiten-Schlüsselwort enthalten, dasfontStretchüberschreiben oder zurücksetzen kann. SetzefontStretchdaher am besten erst nachfont. - Nur Schlüsselwörter sind gültig. Prozentwerte und falsche Werte werden ohne Fehlermeldung ignoriert.