I am playing with various colors on canvas and just noticed that certain overlapping colors (e.g. red on blue) create shadows, as shown in the image below:

If you notice, there's about 0.5px wide shadow on the right side of the red circle.

I have the following code:

<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();

Is there a remedy for this or is this something to learn to live with? Thanks for any ideas.

Tested on Firefox and Chrome on Windows, latest versions.