如何清除圆形区域 - JavaScript Canvas

Question

我在找到解决问题的方法时遇到了一些麻烦 我的游戏涉及定时器设置30秒。当计时器启动时，指示灯熄灭。当灯熄灭时，你可以看到自己内部有一个发光的小气泡，如图所示。

这是灯亮的时候的角色。

我最近遇到了一个问题，同时围绕蜡烛而不是玩家制造了第二个更大的泡泡。目前，我通过在4个黑色矩形的中间绘制图像来制作小气泡。现在，这不会起作用，因为两个不同的图像会重叠，形成一个奇怪的外观。

我想我可以用不同的画布清除黑色背景（一个看不见的）的圆形区域，然后将该图像复制到原始画布上。我试过了，这很慢。

有谁知道解决这个问题的有效方法？

谢谢！

PS：如果你想看到我现在使用的代码，这里是

ctx.fillStyle = "black";
ctx.fillRect(0, 0, cvs.width, cvs.height / 2 - 124);
ctx.fillRect(0, 0, cvs.width / 2 - 125, cvs.height);
ctx.fillRect(0, cvs.height / 2  + 125, cvs.width, cvs.height / 2 - 125);
ctx.fillRect(cvs.width / 2  + 125, 0, cvs.width / 2 - 125, cvs.height);
ctx.drawImage(img.glow, cvs.width / 2 - 125, cvs.height / 2 - 125);