CanvasRenderingContext2D.font

CanvasRenderingContext2D.font – свойство Canvas 2D API, определяющее текущие стили рисуемого текста. Это строка, которая использует синтаксис CSS font.

Синтаксис

ctx.font = value;

Опции

value

Строка String с разобранным CSS font значением. Значение по умолчанию – "10px sans-serif".

Примеры

Использование пользовательского шрифта

Этот пример задаёт в свойстве font другие font-size и font-family.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);

Результат

Загрузка шрифта с помощью CSS Font Loading API

С помощью FontFace API, вы можете явно загрузить шрифт перед использованием его в canvas.

let f = new FontFace("test", "url(x)");
f.load().then(function () {
 // Ready to use the font in a canvas context
});

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

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

Смотрите также

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D