Scaling down browser window blurs content in html5

#1

I have a 1920x1080 html5 canvas, looks perfect on full screen, but when I scale down the browser window, evrything gets blured.
Some sizes gets more blured than others, seems to be random. The blur never is too strong but it’s noticeable. What can I do to fix this?

#2

Do you listen to the resize event and resize accordingly?

I’m not 100% sure this is necessary but would make sense.

#3

I’m not listening to the resize events, the default way of resizing when you build the game and test it on the browser is OK for me. I’m usign that.

#4

OpenFL (by default) should either let you choose a window width and height (which will then CSS scale if the user has a smaller or larger window open) or will set your canvas to the user’s window size, and you listen to Event.RESIZE (or just poll stage.stageWidth and stage.stageHeight) to render based on the current screen size

#5

How do I switch to a Event.RESIZE driven scaling? Should I disable CSS resizing somewhere, then suscribe to Event.RESIZE? That should fix the issue?

#6

You can either not define <window width="" height="" /> in your XML, or set it to 0x0, like <window width="0" height="0" />

Then you would do something like:

stage.addEventListener (Event.RESIZE, stage_onResize);

Then handle the updated stage.stageWidth and stage.stageHeight in your handler :slight_smile:

[BUG] Touch position returns Infinity in HTML5 when window tag is deleted or set to 0 in project.xml
#7

Thanks, the blur issue was fixed setting with and height to “0” and managing the scaling inside the Haxe code on the Stage.Event.resize. Just as singmajesty said.
“0” is better than empty string “”, because setting an empty string breaks the flash build.

1 Like