CanvasRenderingContext2D: свойство textRendering

Свойство CanvasRenderingContext2D.textRendering API Canvas предоставляет рендеринговой системе информацию о том, на что следует делать упор при отрисовке текста.

Значения соответствуют атрибуту SVG text-rendering (и свойству CSS text-rendering).

Значение

Подсказка для движка браузера относительно рендеринга текста. Возможные значения:

auto: Браузер делает обоснованные предположения о том, когда следует оптимизировать скорость, удобочитаемость и геометрическую точность при отрисовке текста.
optimizeSpeed: Браузер отдаёт приоритет скорости рендеринга перед удобочитаемостью и геометрической точностью при отрисовке текста. Отключаются кернинг и лигатуры.
optimizeLegibility: Браузер отдаёт приоритет удобочитаемости перед скоростью рендеринга и геометрической точностью. Включаются кернинг и (по возможности) лигатуры.
geometricPrecision: Браузер отдаёт приоритет геометрической точности перед скоростью рендеринга и удобочитаемостью. Некоторые аспекты шрифтов, такие как кернинг, не масштабируются линейно. При больших масштабах рендеринг текста может быть менее красивым, но размер будет соответствовать ожидаемому (ни округляться вверх, ни вниз до ближайшего поддерживаемого операционной системой размера шрифта).

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

Примеры

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

HTML

<canvas id="canvas" width="700" height="220"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "20px serif";

// Default (auto)
ctx.fillText(`Hello world (default: ${ctx.textRendering})`, 5, 20);

// Text rendering: optimizeSpeed
ctx.textRendering = "optimizeSpeed";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 50);

// Text rendering: optimizeLegibility
ctx.textRendering = "optimizeLegibility";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 80);

// Text rendering: geometricPrecision
ctx.textRendering = "geometricPrecision";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 110);

Результат

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

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

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

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

© 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/textRendering