Avoid blurry images in HTML5?

#1

Hi guys

I’m creating an HTML5 game and the images i’m loading looks very blurry, like in SD resolution.

In this screenshot the left side shows the rendered image and the right side the actual loaded image.

any ideas?

1 Like
#2

Is it being scaled? Is it positioned on an uneven pixel? Is the project set to a hard-coded size?

There are some options to allow smoothing on the canvas, and depending on scale or position, smoothing may occur. Another (more common) case is that the OpenFL projects default to using the requested window width and height, but uses CSS to scale it to fill the full screen. This makes the project work on both desktop and mobile devices, but if you were to embed it into a page, you might choose to use an exactly sized DIV (at least on the desktop) or a “max-width” and “max-height” (at least) to max out at your exact scale on desktop, but to allow it to shrink for mobile