0

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.

enter image description here

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

Thiago Facchini
  • 63
  • 6
  • Does this answer your question? [Can I turn off antialiasing on an HTML element?](https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element) – Tigger Dec 22 '21 at 06:18
  • Could you also show how you actually draw on that canvas? Why do you set the `lineWidth`? Do you call `stroke()`? Does `(mapCanvas.width / CONFIG.RESOLUTION) *dpr` evaluate to an integer value? Also there is a typo in your code `mapCanvas.Height` should be a lowercased `h` in `.height`. Long story short, to be able to help you we need to see a [mcve]. – Kaiido Dec 22 '21 at 06:50

0 Answers0