HTML5 Canvas, blurry bitmap rendering [ SOLVED ]

The title says it all. I’m on a retina ( mac ) display, running a program that simply layouts a bitmap in the page, sticking the bitmap always at the bottom-right, like a signature.

The layout reacting on Event.RESIZE works perfectly and looks really good on a swf, but i need to target html5, and there the rendering is all ugly and blurred.

I tried rounding up the coordinates of the object, setting the html5 project.xml window parameters right, setting the StageScaleMode correctly etc. Nothing!

Am I missing something?

1 Like

Ok after some researches I could fix this problem adding to my project.xml thanks to this post :

This kinda worked too for retina scaling considerations, but you need to hack the index.html

I would like to support a higher resolution canvas based on the <window allow-high-dpi="" /> setting, but I’m afraid that I don’t have a system to test this on, so it may need to wait a bit longer

I just realized I can test this on my phone, I’ll take a look

Didn’t get a chance to look today, but hope to soon

I’ll make some tests too :}

I’ve made an initial pass to support high DPI on HTML5

This commit to Lime disables allowHighDPI by default on HTML5, and should use scaled coordinates when changing the canvas width, and sets a style width/height to compensate. So far, this seems to be working properly.

This fixes the behavior of OpenFL, I think this is what we want to do. Since we scale in CSS, we don’t need to scale in the OpenFL resize, I believe.

If you could, please give these a try, and see if it behaves as you expect. Otherwise, this should be a good starting point to help us.

Thanks :slight_smile:

1 Like