PlayCanvas' canvas size sometimes doesn't match the actual browser window

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?

This is interesting :thinking: It looks like 936 comes from floor(floor(parent height) * DPR)

I wonder it that is consistent against all browsers too.

Can you add a ticket to the engine repo with a repro project and how you got those numbers please? Issues · playcanvas/engine · GitHub

This is going to be one of those painful cases where it’s going to ‘fun’ to test across all browsers :frowning:

The only thing I can think of doing here in the short term on a per project basis is to change the Resolution mode to manual and set it in the project via AppBase | PlayCanvas API Reference