4 ms·

The canvas fonts are fuzzy? Stock OSX and Chrome, 4k display @ 3200 scaled edit: https://github.com/myliang/x-spreadsheet/issues/5 https://github.com/myliang/x

The canvas fonts are fuzzy? Stock OSX and Chrome, 4k display @ 3200 scaled edit: https://github.com/myliang/x-spreadsheet/issues/5 https://github.com/myliang/x-spreadsheet/issues/5

SamBam 8y ago
I see it too. OSX 10.13.3, Chrome 71.0, 2880 x 1800px.
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 ago
  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.
  - c-smile 8y ago
    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.
    - Avery3R 8y ago
      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.
JacobLinney 8y ago
Same thing on Linux with Firefox 64.0 at 3840x2160
ronsor 8y ago
Same on Windows 10 + Chrome with a high-DPI screen. All fuzzy.
myliang 8y ago
fixed, test it
- dustingetz 8y ago
  Thanks I am going to try this out

The canvas fonts are fuzzy? Stock OSX and Chrome, 4k display @ 3200 scaled edit: https://github.com/myliang/x-spreadsheet/issues/5 https://github.com/myliang/x-spreadsheet/issues/5

SamBam 8y ago

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

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 ago
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.
- c-smile 8y ago
  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.
  - Avery3R 8y ago
    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.

JacobLinney 8y ago

Same thing on Linux with Firefox 64.0 at 3840x2160

ronsor 8y ago

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

myliang 8y ago

fixed, test it

dustingetz 8y ago
Thanks I am going to try this out