Context: I'm working on a project to render a map into a HTML Canvas, this map is based on a jittered points and voronoi diagrams. Because of this technique I need to use ctx.scale (both values, width and height are set to 8). Once the map is generated in the canvas, I read each pixel looking for a specific color set, which will then became a 3D map.

Problem: Everything 'works' fine, except that the canvas shapes gets somehow anti-aliased, and that obviously creates a huge problem since some of the colors I read from the pixels won't match my colorset.

So far this is how my canvas setup looks like:

const dpr = window.devicePixelRatio | 1
const ctx = mapCanvas.getContext('2d')
ctx.save()

ctx.scale((mapCanvas.width / CONFIG.RESOLUTION) *dpr, (mapCanvas.Height / CONFIG.RESOLUTION) *dpr)
ctx.lineWidth = 0.5
ctx.globalCompositeOperation = 'source-over'
ctx.imageSmoothingEnabled = false

As for globalCompositeOperation I tried almost all options that made some sense, but the results still the same.

I also added on the CSS side the following:

image-rendering: pixelated;

But also tried crisp-edges.

Long story short, I read more articles / tutorial than I wished, spent 3 hours trying to get around it, but no matter what I do I can't see how am I going to fix it.

Can anybody give a little help?

Thanks in advance.

TF