Javascript 光标显示下面的图像

我试图弄清楚如何将两幅图像层叠在一起，移动光标可以显示图像背后的聚光灯效果

我这里有一个摆弄，我现在有一个图像布局，和一个黑暗的覆盖，只是显示图像没有任何覆盖，因为你移动光标，但我希望一个图像是在顶部，而不仅仅是一个覆盖，而保留了它的外观的其余部分

.科{
背景图片：url(https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-1.2.1&w=1000&q=80）；
背景尺寸：封面；
填充：200px0；
}
#帆布覆盖{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
不透明度：0.85；
}
#帆布线{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
不透明度：0.05；
}
var canvas=document.querySelector（“#canvas overlay”）；
var canvasContext=canvas.getContext（'2d'）；
var lineCanvas=document.querySelector（“#画布行”）；
var linecanvascoxt=lineCanvas.getContext（'2d'）；
var pointLifetime=500；
var点=[]；
//填充画布
canvasContext.fillStyle=“rgba（0,0,0,0.5）”；
canvasContext.fillRect（0,0，canvas.width，canvas.height）；
//初始化
函数init（）{
document.addEventListener（'mousemove'，onMouseMove）；
window.addEventListener（“调整大小”，调整画布大小）；
调整画布的大小（）；
勾选（）；
}
init（）；
//调整画布大小
函数大小调整画布（）{
canvas.width=lineCanvas.width=window.innerWidth；
canvas.height=lineCanvas.height=window.innerHeight；
}
mouseMove函数（事件）{
点。推({
时间：Date.now（），
x:event.clientX，
y:event.clientY
});
}
函数tick（）{
//删除旧点
点=点。过滤器（函数（点）{
var age=Date.now（）-point.time；
返回年龄<生命周期；
});
drawLineCanvas（）；
drawImageCanvas（）；
requestAnimationFrame（勾号）；
//设置超时（（）=>{
//勾选（）；
//}, 1000 / 60);
}
函数drawLineCanvas（）{
var最小线宽=70；
var最大线宽=140；
var线宽范围=最大线宽-最小线宽；
var最大速度=70；
lineCanvasContext.clearRect（0，0，lineCanvas.width，lineCanvas.height）；
lineCanvasContext.lineCap='round'；
lineCanvasContext.shadowBlur=70；
lineCanvasContext.shadowColor='#000'；
对于（变量i=1；i

---

在此方面的任何帮助都将不胜感激。

您非常接近！这是我为让它工作所做的

// Added a new image for the sake of the demo.
var coverImage = new Image();
coverImage.src = 'https://i.picsum.photos/id/719/1000/750.jpg?hmac=jhV0AyBKhvg_tvhHIkS5i_V794dg391QMasWGLlRyNU';

// wait until the image loads then call init
coverImage.addEventListener('load', () => {init();});

// Modified drawImageCanvas to the following.

  function drawImageCanvas() {
    canvasContext.globalCompositeOperation = 'source-over';
    canvasContext.save();
    // Primary change is to draw the image. Also removed the global alpha changes.
    canvasContext.drawImage(coverImage, 0, 0);
    canvasContext.restore();
    canvasContext.globalCompositeOperation = 'destination-out';
    canvasContext.drawImage(lineCanvas, 0, 0);
  }

下面的完整演示中只包含了一些小的CSS更改

var canvas=document.querySelector（“#canvas overlay”）；
var canvasContext=canvas.getContext（'2d'）；
var lineCanvas=document.querySelector（“#画布行”）；
var linecanvascoxt=lineCanvas.getContext（'2d'）；
var pointLifetime=500；
var点=[]；
var coverImage=新图像（）；
coverImage.src=https://i.picsum.photos/id/719/1000/750.jpg?hmac=jhV0AyBKhvg_tvhHIkS5i_V794dg391QMasWGLlRyNU';
//填充画布
canvasContext.fillStyle=“rgba（0,0,0,0.5）”；
canvasContext.fillRect（0,0，canvas.width，canvas.height）；
//初始化
函数init（）{
document.addEventListener（'mousemove'，onMouseMove）；
window.addEventListener（“调整大小”，调整画布大小）；
调整画布的大小（）；
勾选（）；
}
addEventListener（'load'，（）=>{init（）；}）；
//调整画布大小
函数大小调整画布（）{
canvas.width=lineCanvas.width=window.innerWidth；
canvas.height=lineCanvas.height=window.innerHeight；
}
mouseMove函数（事件）{
点。推({
时间：Date.now（），
x:event.clientX，
y:event.clientY
});
}
函数tick（）{
//删除旧点
点=点。过滤器（函数（点）{
var age=Date.now（）-point.time；
返回年龄<生命周期；
});
drawLineCanvas（）；
drawImageCanvas（）；
requestAnimationFrame（勾号）；
//设置超时（（）=>{
//勾选（）；
//}, 1000 / 60);
}
函数drawLineCanvas（）{
var最小线宽=70；
var最大线宽=140；
var线宽范围=最大线宽-最小线宽；
var最大速度=70；
lineCanvasContext.clearRect（0，0，lineCanvas.width，lineCanvas.height）；
lineCanvasContext.lineCap='round'；
lineCanvasContext.shadowBlur=70；
lineCanvasContext.shadowColor='#000'；
对于（变量i=1；i// Added a new image for the sake of the demo.
var coverImage = new Image();
coverImage.src = 'https://i.picsum.photos/id/719/1000/750.jpg?hmac=jhV0AyBKhvg_tvhHIkS5i_V794dg391QMasWGLlRyNU';

// wait until the image loads then call init
coverImage.addEventListener('load', () => {init();});

// Modified drawImageCanvas to the following.

  function drawImageCanvas() {
    canvasContext.globalCompositeOperation = 'source-over';
    canvasContext.save();
    // Primary change is to draw the image. Also removed the global alpha changes.
    canvasContext.drawImage(coverImage, 0, 0);
    canvasContext.restore();
    canvasContext.globalCompositeOperation = 'destination-out';
    canvasContext.drawImage(lineCanvas, 0, 0);
  }