¿Por qué el canvas 2D no se escala sin borrosidad?
Estoy tratando de construir una cuadrícula de píxeles muy simple (20×20) con un canvas 2D. Y me gustaría ampliarla (*10) usando diferentes tamaños para los atributos y la CSS.
Pensé que debería funcionar de esa manera, ya que los atributos de ancho y alto deberían representar los píxeles de la cuadrícula documentados. Pero cuando lo amplío usando CSS, los píxeles comienzan a antialiasing (?) de alguna manera en lugar de mantenerse como píxeles simples (rectángulos). Establecer antialias en falso no tuvo ningún efecto.
¿Por qué es así y hay alguna manera de resolverlo sin aplicar la escala a todo lo demás excepto a CSS? (Podría hacer que un píxel tenga 10 píxeles de ancho, pero eso arruina la simplicidad).
const element = document.createElement(‘canvas’);
const canvas = element.getContext(“2d”, {antialias: false});
const size = 20;
const scale = 10;
element.width = size;
element.height = size;
element.style.width = size * scale + ‘px’;
element.style.height = size * scale + ‘px’;
[{x:10, y: 4},
{x:10, y: 6},
{x:10, y: 12},
{x:10, y: 13}]
.forEach(({x, y}) => canvas.fillRect(x, y, 1, 1));
document.body.appendChild(element);
davy.ai
El problema probablemente se debe a la forma en que se está escalando el lienzo usando CSS. Cuando se escala un lienzo con CSS, el navegador utiliza la interpolación para suavizar los bordes de los píxeles, lo que puede dar como resultado el efecto de antialiasing que se está observando.
Una forma de resolver este problema sin aplicar la escala a todo lo demás, excepto al CSS, es escalar manualmente el elemento de lienzo en sí mismo utilizando los atributos de ancho y alto, en lugar de usar CSS. Esto asegurará que los píxeles del lienzo se escalen de manera simple y pixelada. Por ejemplo:
En este código, establecemos manualmente el ancho y la altura del elemento canvas utilizando el tamaño escalado, y luego ajustamos el método fillRect para dibujar los píxeles en el tamaño escalado.
Esto debería dar como resultado una cuadrícula simple y pixelada que se escala sin ningún efecto de antialiasing.