hkang1/hermes

blurry rendering when devicePixelRatio > 1

Closed this issue · 4 comments

leeoniya commented

@hkang1

you need to size the canvas width/height for physical pixels (also make sure to round those dimensions), and then set the css style to logical pixels. you'll also need to adjust the font size from logical to physical before setting it on the ctx.

so for a requested width of 1000 your canvas.style.width should be 1000 but canvas.width should be Math.round(1000 * devicePixelRatio).

you can verify if it works as expected by zooming the browser and refreshing (without adjusting dpi settings on your display)

image

hkang1 commented

Thanks for reporting this @leeoniya ! I think it should be resolved with the merged PR

leeoniya commented

i replaced the version in the demo, and now i think it's over-doing it :). the canvas is now wider than my screen.

image

i have a 4k display but it's scaled down via browser unzoom to ~2k. my devicePixelRatio is 1.6.

i would expect the code to generate

<canvas width="3840" height="268" style="width: 2400px; height: 168px;">
hkang1 commented

doh, noticed it on the determined project as well. Well someone with a 4k noticed it. I'll get this fixed, accidentally applied device pixel ratio twice...

Thanks as usual for reporting these issues!

hkang1 commented

nope, 3rd times the charm