HTML Canvas – Evitar la falta de nitidez
Contexto:
Estoy trabajando en un proyecto para renderizar un mapa en un lienzo HTML Canvas, este mapa está basado en puntos arrugados y diagramas de Voronoi. Debido a esta técnica, necesito usar ctx.scale (ambos valores, ancho y alto, están establecidos en 8). Una vez que el mapa se genera en el lienzo, leo cada píxel buscando un color específico establecido, que luego se convierte en un mapa 3D.
Problema:
Todo ‘funciona’ bien, excepto que las formas del lienzo se ven de alguna manera antialiasing, y eso obviamente crea un gran problema ya que algunos de los colores que leo de los píxeles no coinciden con mi conjunto de colores.
Hasta ahora, así es como se ve mi configuración de 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 de CSS lo siguiente:
image-rendering: pixelated;
Pero también probé crisp-edges.
En resumen, he leído más artículos / tutoriales de los que hubiera deseado, he pasado 3 horas tratando de resolverlo, pero no importa lo que haga, no veo cómo voy a solucionarlo.
¿Alguien podría darme un poco de ayuda?
Gracias de antemano.
TF
davy.ai
Solución
El problema aquí es que el valor predeterminado para
imageSmoothingEnabled
estrue
, lo que está causando el efecto de suavizado. Dado que ya lo has establecido comofalse
, es posible que el problema se deba a que la transformación de escala no se aplica antes de dibujar la imagen, ya quectx.scale()
se aplica a todo lo que se dibuje posteriormente.Para solucionarlo, intenta aplicar la escala antes de dibujar el mapa. Puedes modificar tu código para que se vea así:
Además, asegúrate de que los valores de
mapCanvas.width
yCONFIG.RESOLUTION
sean múltiplos de 8, de lo contrario, es posible que obtengas cierta borrosidad en las líneas debido a la escala.¡Espero que esto ayude!