HTML5 Blurry rendering on Chrome

JimPancakes

Member
I'm trying to get a crispy/pixelated look for my HTML5 game. While Firefox renders it perfectly Chrome doesn't. Chrome makes it look blurry.

From my testing the culprit is this line from the index.html file:
image-rendering: optimizeSpeed;

I've done some research on the web and changing "optimizeSpeed" to "pixelated" does make it look as I want it on Chrome but breaks it on Firefox. Changing it to "crisp-edges" does the opposed.

Does anyone know how to get pixelated visuals on all browsers?

This is the page that helped me:
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
 

JimPancakes

Member
Here's how it looks on Chrome with default index.html settings:



And this is on Mozilla:



Is there any way to make it look like on Mozilla on all browsers???
 

kupo15

Member
I don't know much about HTML but is it possible the surface sizes or device window sizes are somehow different between the two browsers?
 

JimPancakes

Member
I don't know much about HTML but is it possible the surface sizes or device window sizes are somehow different between the two browsers?
I made the game so that it resizes both the surface and the game window on the fly based on the size of the browser window. Besides I don't see how than can make the visuals blurry... Regardless of the surface or the window size the visuals should still be sharp.
 
Top