He vistoest yest discusión sobre la eliminación de antialiasing en lienzos, pero no creo que sea lo mismo.

Después de escalar un lienzo html5 por un valor arbitrario (es decir, hacerlo sensible), he notado que si dibujo dos rectángulos del mismo tamaño y en la misma ubicación, los bordes del lado escalado del primer rectángulo permanecen visibles .

He incluido un fragmento de ejemplo en el que dibujo un rectángulo gris y luego dibujo un rectángulo rojo encima. Hay una línea vertical roja de un píxel en los bordes izquierdo y derecho del rectángulo gris. Sé que puede parecer trivial, pero es muy notable en mi situación.

¿Cómo puedo solucionar esto? ¡Gracias

var example = document.getElementById("example");
var ctx = example.getContext('2d');

ctx.scale(1.13,1);

ctx.fillStyle = "LightGrey";
ctx.fillRect(10,10,50,30);

ctx.fillStyle = "Black";
ctx.font = "20px Arial";
ctx.fillText("< Looks good.",70,30);

ctx.fillStyle = "Red";
ctx.fillRect(10,50,50,30);

// This light grey rectangle should completely cover the previous red one, but it doesn't!
ctx.fillStyle = "LightGrey";
ctx.fillRect(10,50,50,30);

ctx.fillStyle = "Black";
ctx.font = "20px Arial";
ctx.fillText("< Do you see red?",70,70);

<canvas id="example"></canvas>