CanvasRenderingContext2D: свойство fontStretch

Свойство CanvasRenderingContext2D.fontStretch API Canvas API определяет, как шрифт может быть расширен или сжат при отрисовке текста.

Свойство соответствует свойству CSS font-stretch при использовании ключевых слов (значения в процентах не поддерживаются).

Значение растяжения шрифта в виде строки. Это одно из следующих значений: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (по умолчанию), semi-expanded, expanded, extra-expanded, ultra-expanded.

Свойство может использоваться для получения или установки значения растяжения шрифта.

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

Сначала мы получаем холст, объявленный в файле HTML, и используем его для получения CanvasRenderingContext2D, который впоследствии будет использоваться для отрисовки текста.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

Следующий шаг в примере — загрузить шрифт, который можно изменять по ширине. Это необходимо, потому что fontStretch может растянуть только шрифт, содержащий информацию о том, как глифы рисуются при растяжении — в противном случае текст будет нарисован с использованием ближайшего доступного значения растяжения шрифта для шрифта, что часто будет значением нормальной ширины.

В этом случае мы используем FontFace для определения начертания шрифта Inconsolata из Google Fonts, который поддерживает ширину шрифта от 50% до 200% (что позволяет нам продемонстрировать значения fontStretch от ultra-condensed до ultra-expanded). Затем мы добавляем его в FontFaceSet документа (document.fonts), чтобы его можно было использовать для отрисовки.

const fontFile = new FontFace(
  "Inconsolata",
  'url(https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2) format("woff2")',
  { stretch: "50% 200%" },
);

document.fonts.add(fontFile);

Нижеприведенный код вызывает FontFaceSet.load() для получения и загрузки шрифта Google. Обратите внимание, что этот вызов устанавливает необходимый размер шрифта и возвращает промис, который разрешается, когда шрифт загружен.

Затем мы назначаем загруженный шрифт контексту и используем контекст для отрисовки текста на холсте для каждого из значений растяжения ключевых слов. Обратите внимание, что снова указывается размер желаемого шрифта (он не обязательно должен совпадать с загруженным размером шрифта).

document.fonts.load("30px Inconsolata").then(
  () => {
    ctx.font = "30px 'Inconsolata'";
    // Default (normal)
    ctx.fillText(`Hello world (default: ${ctx.fontStretch})`, 5, 20);

    ctx.fontStretch = "ultra-condensed";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 50);

    ctx.fontStretch = "extra-condensed";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 80);

    ctx.fontStretch = "condensed";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 110);

    ctx.fontStretch = "semi-condensed";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 140);

    ctx.fontStretch = "extra-condensed";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 170);

    ctx.fontStretch = "semi-expanded";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 200);

    ctx.fontStretch = "expanded";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 230);

    ctx.fontStretch = "extra-expanded";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 260);

    ctx.fontStretch = "ultra-expanded";
    ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 290);
  },
  (err) => {
    console.error(err);
  },
);