I'm writing a game similar to the famous https://www.reddit.com/r/place/. I have a 1000x1000 canvas where I use drawImage() function to populate the canvas. My setup is like this:
<div id="container"><canvas/></div>
and I manage the zooming part using the following CSS rule:
$("#container").css({ transform: `scale(z)`});
where z represents the zoom level and I change it depending on user input
I have imageSmoothingEnabled = false on my canvas context. This works fine on desktop, however on mobile when I zoom in, the pixels are blurry. I'm guessing this has to do with devicePixelRatio but I couldn't figure it out. I also have:
image-rendering: pixelated;
image-rendering: crisp-edges;
in my CSS for the canvas.
- Here is a screenshot from desktop/chrome when zoomed:
- Here is a screenshot from mobile(ios) when zoomed:
The pixelation issue only manifests itself on mobile when zoomed in.