Ejemplo: https://jsfiddle.net/jm1y9c0L/1/
Código:
const context = document.getElementById("canvas").getContext("2d"); const scale = document.getElementById("scale"); const translate = document.getElementById("translate"); scale.value = 17.78598548284369; translate.value = 10.02842190048295; function draw() { context.fillStyle="#f00"; context.fillRect(0,0,1,1); context.fillRect(1,0,1,1); } function update() { const s = Number(scale.value); const t = Number(translate.value); context.clearRect(0,0,100,100); context.save(); context.translate(t,t); context.scale(s,s); draw(); context.restore(); } update();Pregunta: ¿Cómo dibujo mosaicos en lienzo en un contexto escalado en lienzo sin espacios borrosos?
Algunas cosas a tener en cuenta: si no cambio el fondo a negro, las cosas se ven bien: https://jsfiddle.net/jm1y9c0L/2/
Creo que si dibujo todos los mosaicos en un búfer y dibujo el búfer en el lienzo escalado, funcionaría. Pero eso tiene muchos problemas, uno de los cuales es que potencialmente usa mucha memoria si estoy escalando un búfer muy grande más pequeño.
Editar: para explicar mejor mi objetivo, quiero dibujar dos rectángulos uno al lado del otro con sus límites como una fracción. Entonces, si dibujo dos rectángulos, uno en verde y otro en rojo con un fondo negro. Quiero ver que el límite sea mitad verde, mitad rojo, pero nada negro.
Es porque está usando flotantes y no enteros, el lienzo no puede dibujar 0.78598548284369 de un píxel, recomendaría poner Math.floor() alrededor de su escala en la función scale():
context.scale(Math.floor(s),Math.floor(s));
Espero que esto ayude: D
No puede hacer la representación de subpíxeles en un navegador (al menos no puede esperar resultados consistentes). En su caso, el final de un rectángulo no es necesariamente el comienzo del otro, ya que puede haber o no un espacio de ancho de píxel que proviene del redondeo.
Incluso podría notar algún comportamiento extraño, como obtener diferentes resultados en diferentes posiciones de pantalla, diferentes navegadores, al cambiar el tamaño, etc.
La solución es calcular el valor de cada píxel usted mismo, no dejar que el navegador lo haga por usted.