Hacker News Reader

By nature of <canvas>, it uses grayscale antialiasing of text

Here (MS Edge, Windows, High-DPI screen):

http://cloud.sciter.com/index.php/s/fcTbout1oQqwIJg

You see how different text rendering in normal DOM rendering (text "Normal") and the text inside canvas.

Grayscale AA text looks blurred. Grayscale AA works only for relatively large font sizes, for standard UI text sizes it is highly non-desirable.

View on HN

Although canvas does do grayscale anti-aliasing, this particular app is blurry because the canvas is being rendered at a lower resolution than your screen. To make it crisp, the author would have to set the canvas' javascript canvas.width property to be twice the canvas' css canvas.style.width property.

Yes, oversampling will reduce blurriness but it will be there anyway. ClearType is there for the purpose.

Yet all that with the price of memory and CPU consumption - number of pixels to rasterize on 192 PPI monitor is four times of the one with "standard" 96 PPI.

It's not oversampling, it's native sampling. On high DPI displays browsers automatically apply a zoom to the page, so the canvas ends up being a smaller size that gets blown up. You have to detect this and create the canvas bigger to begin with to counteract this.

Reply on news.ycombinator.com