The CanvasRenderingContext2D.textRendering property of the Canvas API provides information to the rendering engine about what to optimize for when rendering text.
The values correspond to the SVG text-rendering attribute (and CSS text-rendering property).
A text-rendering hint to the browser engine. This one of:
auto
The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.
optimizeSpeed
The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
optimizeLegibility
The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
geometricPrecision
The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don't scale linearly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect (neither rounded up nor down to the nearest font size supported by the underlying operating system).
The property can be used to get or set the value.
In this example we display the text "Hello World" using each of the supported values of the textRendering property. The value is also displayed for each case by reading the property.
html
<canvas id="canvas" width="700" height="220"></canvas>
js
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);
| Specification |
|---|
| HTML Standard # dom-context-2d-textrendering |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
textRendering |
99 | 99 | 116 | No | 85 | No | 99 | 99 | 116 | 68 | No | 18.0 |
© 2005–2023 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