Signatur
Beschreibung
Die Eigenschaft lang von CanvasRenderingContext2D legt fest, welche Sprache der Browser beim Zeichnen von Text auf dem Canvas annimmt. Sie erwartet einen BCP-47-Sprachcode wie "de", "ja" oder "zh-Hans". Der Standardwert ist "inherit": Die Sprache wird dann vom lang-Attribut des <canvas>-Elements bzw. seiner Vorfahren (oder vom Dokument) übernommen.
Die Sprache beeinflusst die Glyphenauswahl und Textgestaltung (Shaping) der Schrift. Besonders wichtig ist das bei vereinheitlichten CJK-Schriftzeichen (Han-Unifikation): Dasselbe Unicode-Zeichen wird im Japanischen, im vereinfachten und im traditionellen Chinesischen oder im Koreanischen teils unterschiedlich geformt. Auch sprachspezifische OpenType-Features (z. B. Ligaturen, lokalisierte Formen im Serbischen oder Türkischen) können davon abhängen.
Die Eigenschaft ist Teil des Zeichenzustands: Sie wird mit save() gesichert, mit restore() wiederhergestellt und von reset() auf "inherit" zurückgesetzt. Sinnvoll ist ihr Einsatz vor allem bei mehrsprachigen Beschriftungen, Diagrammen oder Spielen, bei denen Texte in verschiedenen Sprachen auf ein und demselben Canvas stehen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "inherit" | Beim Setzen: ein gültiger BCP-47-Sprachcode (z. B. "en-US", "ja"), "inherit" für Vererbung vom Canvas-Element/Dokument oder ein leerer String für „Sprache unbekannt“. |
Beispiele
Sprache auslesen und setzen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
console.log(ctx.lang); // Standardwert
ctx.lang = 'de';
console.log(ctx.lang);Han-Unifikation: dasselbe Zeichen in Japanisch und Chinesisch
const ctx = document.querySelector('canvas').getContext('2d');
ctx.font = '48px sans-serif';
// Gleicher Codepunkt, unterschiedliche Glyphenform je nach Sprache
ctx.lang = 'ja';
ctx.fillText('直 骨 角', 20, 60);
ctx.lang = 'zh-Hans';
ctx.fillText('直 骨 角', 20, 130);Sprache mit save()/restore() lokal ändern
const ctx = document.querySelector('canvas').getContext('2d');
ctx.font = '24px serif';
const drawLabel = (text, lang, x, y) => {
ctx.save();
ctx.lang = lang;
ctx.fillText(text, x, y);
ctx.restore(); // lang wieder auf vorherigen Wert
};
drawLabel('Hallo Welt', 'de', 10, 30);
drawLabel('こんにちは', 'ja', 10, 70);
console.log(ctx.lang);Feature-Erkennung mit Fallback über das HTML-Attribut
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
if ('lang' in ctx) {
ctx.lang = 'ja';
} else {
// Ältere Browser: Sprache über das Element vorgeben
canvas.setAttribute('lang', 'ja');
}
ctx.font = '32px sans-serif';
ctx.fillText('直', 10, 40);// Wichtig · Fallstricke
- Browser-Unterstützung: Die Eigenschaft ist neu und experimentell; nicht alle Browser unterstützen sie. Vor der Nutzung per
'lang' in ctxprüfen. In nicht unterstützenden Browsern wird die Zuweisung stillschweigend ignoriert. - Die sichtbare Wirkung hängt von der verwendeten Schrift ab: Enthält die Schrift keine sprachspezifischen Glyphen oder OpenType-
locl-Features, sieht der Text unabhängig vonlanggleich aus. "inherit"in einemOffscreenCanvas(z. B. im Worker) greift auf die Sprache des zugehörigen Canvas-Elements bzw. Dokuments zurück, sofern vorhanden – sonst bleibt die Sprache unbestimmt. Dort also besser explizit setzen.- Ungültige Sprachcodes werden nicht mit einer Ausnahme quittiert; die Darstellung fällt dann auf das Standardverhalten zurück.
langbeeinflusst nicht die Schreibrichtung – dafür istctx.directionzuständig.