Javascript 画布，JS火炬效果：用图片填充背景

我在画布上画了一个动画火焰

它应该创建火炬效果，照亮页面的背景

这一切都很好，直到我不想改变画布的背景图片。这根本不起作用

当我通过CSS设置背景时，我的火焰为整个画布着色

有人能帮我把画布的背景改成图片而不破坏效果吗

这是一个密码笔

window.onload=function（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//使画布占据整个页面
var W=窗内宽度，
H=窗内高度；
画布宽度=W；
canvas.height=H；
var粒子=[]；
var鼠标={}；
//现在让我们创建一些粒子
var粒子计数=100；
对于（var i=0；i<粒子计数；i++）{
粒子。推（新粒子（））；
}
//最后是一些鼠标跟踪
canvas.addEventListener（'mousemove'，track\u mouse，false）；
功能跟踪鼠标（e）{
//因为canvas=整页，所以鼠标的位置
//相对于文件就足够了
mouse.x=e.pageX；
mouse.y=e.pageY；
}
函数粒子（）{
//速度、寿命、位置、寿命、颜色
//速度.x范围=-2.5到2.5
//速度.y范围=-15到-5，使其向上移动
//让我们更改Y速度，使其看起来像火焰
这个速度={
x:-2.5+数学随机（），
y:-15+数学随机数（）*10
};
//位置=鼠标坐标
//现在火焰跟随鼠标坐标
if（mouse.x&&mouse.y）{
此位置={
x:mouse.x，
y:老鼠，y
};
}否则{
此位置={
x:W/2，
y:H/2
};
}
//半径范围=10-30
this.radius=10+Math.random（）*20；
//寿命范围=20-30
this.life=20+Math.random（）*10；
剩余寿命=剩余寿命；
//颜色
这个r=74；
这个g=77；
这.b=84；
//this.r=Math.round（Math.random（）*255）；
//this.g=Math.round（Math.random（）*255）；
//this.b=Math.round（Math.random（）*255）；
}
函数绘图（）{
//把画布涂成黑色
//是时候施展魔法了
//粒子被涂上“打火机”
//在下一帧中，正常绘制背景，而不与背景混合
//上一个framevar im=新图像（）；
ctx.globalCompositeOperation=“源代码结束”；
//var im=新图像（）；
//im.src=“./background.jpg”；
//im.onload=函数（）{
//ctx.drawImage（im，W，H）；
//		}
ctx.fillStyle=“黑色”；
ctx.fillRect（0,0,W,H）；
//var src=“../images/background.jpg”；
//var img=新图像（）；
//img.src=src；
//$（img）.加载（函数（）{
//var pattern=ctx.createPattern（img，“repeat”）；
//ctx.fillStyle=图案；
//ctx.fillRect（0,0,W,H）；
//		  });
ctx.globalCompositeOperation=“打火机”；
对于（var i=0；i

*{
保证金：0；
填充：0；
}
#帆布{
显示：块；
/*背景：url（“../images/background.jpg”）*/
}
.火炬{
/*光标：无*/
--cursorX:50vw；
--粗略：50vh；
}
：root:before{
内容：''；
显示：块；
宽度：100%；
身高：100%；
位置：固定；
指针事件：无；
背景：径向梯度（圆圈10v
 var base_image = new Image();
  base_image.src = 'https://images.unsplash.com/photo-1499955618064-79cd8e8d8672?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=13c8ccb1b33e610c3e8d6a4094dc85fd';
  base_image.onload = function(){
    ctx.drawImage(base_image, 100, 100);
  }

ctx.drawImage(base_image, 100, 100);