4 ms·
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 ht
by c-smile 8y ago
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 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.
- bijection 8y agoAlthough 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.
- c-smile 8y agoYes, 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.
- Avery3R 8y agoIt'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.