Hacker News Reader

HNHacker News

Top New Best Ask Show Jobs

Comment by dustingetz | Hacker News Reader

Full thread

dustingetz·

The canvas fonts are fuzzy? Stock OSX and Chrome, 4k display @ 3200 scaled

edit: https://github.com/myliang/x-spreadsheet/issues/5

View on HN

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.

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.

Same on Windows 10 + Chrome with a high-DPI screen. All fuzzy.

I see it too. OSX 10.13.3, Chrome 71.0, 2880 x 1800px.

Same thing on Linux with Firefox 64.0 at 3840x2160

fixed, test it

Thanks I am going to try this out

Reply on news.ycombinator.com