CanvasRenderingContext2D: свойство letterSpacing

Свойство CanvasRenderingContext2D.letterSpacing API Canvas API определяет интервал между буквами при отрисовке текста.

Это соответствует свойству CSS letter-spacing.

Значение

Интервал между буквами как строка в формате данных CSS <length>. Значение по умолчанию — 0px.

Свойство может использоваться для получения или установки интервала. Значение свойства останется неизменным, если оно установлено на недопустимое/неразбираемое значение.

Примеры

В этом примере текст "Hello World" отображается три раза, используя свойство letterSpacing для изменения интервала между буквами в каждом случае. Интервал также отображается для каждого случая, используя значение свойства.

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);

Результат

Спецификации

Спецификация
HTML # dom-context-2d-letterspacing

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`letterSpacing`	99	99	115	85	Нет	99	115	68	Нет	18.0	99

См. также

CanvasRenderingContext2D.wordSpacing

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing