Estoy jugando con varios colores en el lienzo y noté que ciertos colores superpuestos (por ejemplo, rojo sobre azul) crean sombras, como se muestra en la imagen a continuación:

Si nota, hay una sombra de aproximadamente 0.5px de ancho en el lado derecho del círculo rojo.

Tengo el siguiente código:

 <canvas width="1000" height="1000"></canvas> const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); // BG ctx.fillStyle = '#1c4c72'; ctx.fillRect(0, 0, 1000, 1000); // Circle red ctx.beginPath(); ctx.arc(500, 500, 250, 0, 2 * Math.PI); ctx.fillStyle = '#9a1500'; ctx.fill(); // Circle white ctx.beginPath(); ctx.arc(500, 500, 150, 0, 2 * Math.PI); ctx.fillStyle = '#ffffff'; ctx.fill();

¿Hay algún remedio para esto o es algo con lo que hay que aprender a vivir? Gracias por cualquier idea.

Probado en Firefox y Chrome en Windows, últimas versiones.