[HTML5] Display looks bad when it is not a scale

[utaner]

[HTML5] Display looks bad when it is not a scale

[joshtynjala]

Copying my response from the Discord. Maybe it'll be useful to someone else too, if this thread shows up in a Google search.

From your project.xml file:

<window width="1024" height="768"/>

When you set the <window> width and height to something lower than the browser window dimensions for the html5 target, a lower rendering quality is expected with our default index.html template because that template still makes the canvas fill the entire browser view port. In other words, it is scaled up from a lower resolution. It should be a little blurry.

When you bump up scaling outside of OpenFL, the browser's window.devicePixelRatio is increased. That's the value OpenFL uses to determine how much it should scale itself for HiDPI screens. So OpenFL is rendering at higher quality than it normally would for the window dimensions that you specified (but closer to what it would be if you had specified no window dimensions at all). Since the canvas still fills the same amount of space in the browser window, it ends up looking crisper.

Both behaviors are expected when you specify window dimensions in project.xml for the html5 target.