CanvasRenderingContext2D: letterSpacing-Eigenschaft
Baseline
2025
Neu verfügbar
Seit March 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die CanvasRenderingContext2D.letterSpacing-Eigenschaft der Canvas-API gibt den Abstand zwischen Buchstaben beim Zeichnen von Text an.
Dies entspricht der CSS-Eigenschaft letter-spacing.
Wert
Der Buchstabenabstand als Zeichenkette im CSS-Datenformat <length>.
Der Standardwert ist 0px.
Die Eigenschaft kann verwendet werden, um den Abstand zu erhalten oder festzulegen. Der Eigenschaftswert bleibt unverändert, wenn ein ungültiger/unentzifferbarer Wert gesetzt wird.
Beispiele
In diesem Beispiel zeigen wir den Text "Hello World" dreimal an, wobei die letterSpacing-Eigenschaft verwendet wird, um den Buchstabenabstand in jedem Fall zu ändern.
Der Abstand wird in jedem Fall unter Verwendung des Wertes der Eigenschaft angezeigt.
HTML
<canvas id="canvas" width="700"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px serif";
// Default letter spacing
ctx.fillText(`Hello world (default: ${ctx.letterSpacing})`, 10, 40);
// Custom letter spacing: 10px
ctx.letterSpacing = "10px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 90);
// Custom letter spacing: 20px
ctx.letterSpacing = "20px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 140);
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-context-2d-letterspacing |