在 HTML Canvas 上，某些重叠颜色会产生不需要的阴影

Question

我正在画布上使用各种颜色，只是注意到某些重叠的颜色（例如蓝色上的红色）会产生阴影，如下图所示：

如果您注意到，上面有大约 0.5px 宽的阴影的右侧红色圆圈。

我有以下代码：

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

是否有补救措施，或者这是需要学习忍受的东西？感谢您的任何想法。

在 Windows 上的 Firefox 和 Chrome 最新版本上进行了测试。