Yet another post about the never ending pursuit of crisp graphics. You’re welcome.
I did a simple test, and rendered a grid of 2x2 pixels across the screen, turned on “Device Pixel Ratio”, took a screen shot, and enlarged it in Photoshop. The pixels were noticeably smeared vertically.
(Just to be clear, here are all the settings: Resolution Mode: Auto, Fill Mode: Fill Window. The UI screen was in Screen Space without scaling.)
After a bit of digging, I found the following:
The parentElement rect.height: 749.6
Device Pixel Ratio: 1.25
The resulting canvas height: 937 px
Measuring the actual height of the browser window: 936 px
No doubt the problem here is that the height of the parent element isn’t a whole number, and therefore, the created canvas doesn’t match the actual browser window. And when compressed one pixel to fit the browser window, the graphics become smeared, especially in the middle of the screen.
When I manually adjusted the browser window to get a parent element height without decimals, my grid of pixels rendered perfectly crisp.
Here’s another comparison. Even without zooming in, the text from the mismatched canvas lacks the punch of the lower text.
So just checking the Device Pixel Ratio box clearly isn’t enough. Can someone with better programming skills than me cook up a solution?
Thanks!
It looks like 936 comes from 