Javascript画布简单光源

我正在用javascript画布制作一个游戏。我正在画所有的游戏元素，比如球员、方块和线条，但我不想让你看到所有这些。相反，我们希望整个屏幕都是黑色的，比如在一些有光源的地方。我不需要任何阴影，只需要屏幕上的一个圆形，用径向渐变照亮。在我画完其他所有东西后，我可以通过添加一个透明的渐变来实现这一点，比如：（想象红色矩形就是游戏中的所有东西）

但是我如何用多个光源来实现这一点呢？显示的技术不起作用

---

我尝试过使用illumed.js api，但速度太慢了，我不需要任何阴影和其他花哨的东西，只需要一个圆圈就可以看到游戏。

以下是我的方法示例-创建黑白蒙版并用它乘以底图：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
//绘制所有游戏元素
ctx.fillStyle=“红色”；
ctx.fillRect（100100400300）；
//加上黑暗和光源
功能添加灯（ctx、x、y）{
var grd=ctx.createRadialGradient（x，y，10，x，y，150）；
grd.ADDCORSTOP（0，“白色”）；
grd.addColorStop（1，“透明”）；
ctx.fillStyle=grd；
ctx.fillRect（0,060400）；
}
var buffer=document.createElement（'canvas'）；
缓冲区宽度=600；
缓冲区高度=400；
b_ctx=buffer.getContext（'2d'）；
b_ctx.fillStyle=“黑色”；
b_ctx.fillRect（0,060400）；
addlight（b_ctx，150100）；
addlight（b_ctx，350200）；
addlight（b_ctx，450250）；
ctx.globalCompositeOperation=“乘法”；
ctx.drawImage（缓冲区，0，0）
我对画布没有经验，但在理论上：在单独的背景（缓冲区、图像、画布？）中，将灯光绘制为白色->黑色背景上的透明渐变，然后用多重混合模式将其绘制到场景中。这可能行得通，我会研究一下。您可能想检查一下，它们可能有东西给您。
//Drawing all the game elements 
ctx.fillStyle = "red"; 
ctx.fillRect(100, 100, 400, 300);

//adding the darkness and the lightsources
var grd = ctx.createRadialGradient(150, 100, 5, 150, 100, 100);
grd.addColorStop(0, "transparent");
grd.addColorStop(1, "black");
ctx.fillStyle = grd; ctx.fillRect(0, 0, 600, 400);