Contexto: estoy trabajando en un proyecto para representar un mapa en un lienzo HTML, este mapa se basa en puntos jittered y diagramas de voronoi. Debido a esta técnica, necesito usar ctx.scale (ambos valores, ancho y alto se establecen en 8). Una vez que se genera el mapa en el lienzo, leo cada píxel buscando un conjunto de colores específico, que luego se convertirá en un mapa 3D.

Problema: todo 'funciona' bien, excepto que las formas del lienzo se suavizan de alguna manera, y eso obviamente crea un gran problema ya que algunos de los colores que leo de los píxeles no coincidirán con mi conjunto de colores.

Hasta ahora, así es como se ve la configuración de mi lienzo:

 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

En cuanto a globalCompositeOperation, probé casi todas las opciones que tenían sentido, pero los resultados siguen siendo los mismos.

También agregué en el lado CSS lo siguiente:

 image-rendering: pixelated;

Pero también probé los bordes crujientes.

Para resumir, leí más artículos / tutoriales de los que deseaba, pasé 3 horas tratando de solucionarlo, pero no importa lo que haga, no puedo ver cómo voy a solucionarlo.

¿Alguien puede dar un poco de ayuda?

Gracias por adelantado.

TF