CanvasRenderingContext2D.textRendering — Eigenschaft · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.textRendering

Beschreibung

Mit der Eigenschaft textRendering eines 2D-Kontexts legst du fest, worauf die Rendering-Engine beim Zeichnen von Text mit fillText() und strokeText() optimieren soll. Sie entspricht der CSS-Eigenschaft text-rendering und nimmt dieselben Schlüsselwörter an: "auto", "optimizeSpeed", "optimizeLegibility" und "geometricPrecision".

Der Wert ist ein Hinweis und keine verbindliche Anweisung. Welche Wirkung er hat, hängt vom Browser, vom Betriebssystem und von der Schrift ab. Typisch ist: "optimizeLegibility" schaltet Kerning und Ligaturen ein, "optimizeSpeed" schaltet sie ab, damit schneller gezeichnet wird, und "geometricPrecision" verzichtet auf Font-Hinting. Letzteres sorgt dafür, dass Text beim Skalieren und Animieren gleichmäßig wächst und nicht an ganzen Pixelgrößen „einrastet“.

Nützlich ist die Eigenschaft vor allem in drei Fällen: bei Diagrammen und Beschriftungen, die gut lesbar sein sollen, bei stark animiertem Text wie Zoom-Effekten oder bei Spielen mit sehr vielen Textaufrufen pro Frame. Wie alle Zeichenzustände wird textRendering mit save() gesichert und mit restore() wiederhergestellt.

Parameter

Name	Typ	Default	Beschreibung
$value	"auto" \| "optimizeSpeed" \| "optimizeLegibility" \| "geometricPrecision"	"auto"	Zugewiesener Wert. `"auto"`: Der Browser wählt einen Kompromiss. `"optimizeSpeed"`: Geschwindigkeit hat Vorrang (kein Kerning, keine Ligaturen). `"optimizeLegibility"`: Lesbarkeit hat Vorrang (Kerning und Ligaturen aktiv). `"geometricPrecision"`: exakte Geometrie ohne Hinting, gut für skalierten Text. Die Schreibweise mit Großbuchstaben muss genau stimmen.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert als Zeichenkette, zum Beispiel "auto" (Standard) oder "optimizeLegibility". In Browsern ohne Unterstützung ist der Wert undefined.

Beispiele

Wert lesen und setzen

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

console.log(ctx.textRendering); // Standardwert

ctx.textRendering = 'optimizeLegibility';
console.log(ctx.textRendering);

// Ungültige Werte werden ignoriert
ctx.textRendering = 'schnell';
console.log(ctx.textRendering);

auto optimizeLegibility optimizeLegibility

Kerning und Ligaturen direkt vergleichen

const canvas = document.querySelector('#demo');
const ctx = canvas.getContext('2d');
ctx.font = '32px Georgia, serif';

const modes = ['optimizeSpeed', 'optimizeLegibility', 'geometricPrecision'];

modes.forEach((mode, i) => {
  ctx.textRendering = mode;
  ctx.fillText(`AVATAR office fi – ${mode}`, 10, 40 + i * 45);
});

Flüssiger Zoom-Text mit geometricPrecision und Feature-Erkennung

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

const supportsTextRendering = 'textRendering' in CanvasRenderingContext2D.prototype;

let scale = 1;
const draw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  if (supportsTextRendering) {
    ctx.textRendering = 'geometricPrecision'; // kein Hinting → stufenlose Skalierung
  }
  ctx.font = `${12 * scale}px system-ui, sans-serif`;
  ctx.fillText('Stufenloser Zoom', 20, 60);
  ctx.restore(); // setzt textRendering wieder zurück

  scale = scale >= 4 ? 1 : scale + 0.01;
  requestAnimationFrame(draw);
};

requestAnimationFrame(draw);

// Wichtig · Fallstricke

Browserunterstützung: Chromium-Browser (Chrome, Edge, Opera) unterstützen die Eigenschaft seit Version 99. In Firefox und Safari fehlt sie oder ist nur eingeschränkt verfügbar. Prüfe das vorher mit 'textRendering' in CanvasRenderingContext2D.prototype. Eine Zuweisung in einem Browser ohne Unterstützung legt nur eine normale JS-Eigenschaft an und bleibt ohne Wirkung.
Nur ein Hinweis: Die sichtbare Wirkung hängt von Schrift, Plattform und Schriftgröße ab. Manche Engines aktivieren Kerning ab einer bestimmten Schriftgröße schon bei "auto", dann siehst du keinen Unterschied.
Groß- und Kleinschreibung: "optimizelegibility" ist ungültig und wird stillschweigend ignoriert. Es gibt keine Fehlermeldung.
Performance: "optimizeLegibility" kann bei sehr vielen fillText()-Aufrufen pro Frame messbar langsamer sein. In Spielen oder Echtzeit-Visualisierungen kann "optimizeSpeed" helfen.
Überschneidungen: Die Eigenschaften fontKerning und fontVariantCaps steuern Teilaspekte gezielter. Wenn du mehrere davon kombinierst, kann das Ergebnis je nach Browser anders ausfallen.
Auch in OffscreenCanvasRenderingContext2D verfügbar, soweit der Browser das unterstützt.

Siehe auch

CanvasRenderingContext2D CanvasRenderingContext2D.fillText() CanvasRenderingContext2D.strokeText() CanvasRenderingContext2D.font CanvasRenderingContext2D.fontKerning CanvasRenderingContext2D.letterSpacing CanvasRenderingContext2D.measureText()