Sub-pixel rendering in Chrome Canvas

Question

I\'m wondering if anyone knows if it\'s possible to enable sub-pixel rendering in an HTML5 canvas in Chrome (and/or Safari).

Chrome does sub-pixel rendering in HTML,

Answer 1

It is possible, depending on the platform. Here is how to do it:

1. Create an opaque canvas context, with canvas.getContext('2d', {alpha: false})
2. Set the -webkit-font-smoothing property to the value you want: auto, antialias (blur), subpixel-antialias ("LCD" text with color fringe) or none.

This will apply to all of the text in the canvas.

Here's a screenshot from Chrome 81 on Mac; the text in the green rectangle is canvas fillText:

Here is the source of this file:

(auto)

??????????

||||||||||

IIIIIIIIII

llllllllll

//////////



(antialiased)

??????????

||||||||||

IIIIIIIIII

llllllllll

//////////



(subpixel)

??????????

||||||||||

IIIIIIIIII

llllllllll

//////////



(none)

??????????

||||||||||

IIIIIIIIII

llllllllll

//////////