使用HTML画布制作背景雾效果

Question

如何使用片段中的画布制作雾背景效果。我尝试制作雾效果而不绘制新图像。如果删除，请绘制新图像，使雾气留在屏幕上。如何仅使雾过渡而不从画布添加新图像。雾从中心出来，消失在窗外。

const canv = document.getElementById("canvas"),
      ctx = canv.getContext("2d"),
      img = new Image(),
      imgMask = new Image();

let W = window.innerWidth -10;
let H = window.innerHeight -10;
canv.height = H;
canv.width = W;
imgMask.src = "https://res.cloudinary.com/dkcygpizo/image/upload/v1505176017/codepen/cloud-texture.png";
img.src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2014/05/city-wallpaper-7.jpg";

let speed = 0;
let requestId;

function draw() {
  speed += 20;

  const maskX = (canv.width - (70 + speed)) / 2,
        maskY = (canv.height - (40 + speed)) / 2;

  ctx.clearRect(0, 0, canv.width, canv.height);
  ctx.globalCompositeOperation = "source-over";

  ctx.drawImage(imgMask, maskX, maskY, 70 + speed, 40 + speed);
    
// ctx.globalCompositeOperation = "source-in";
// ctx.drawImage(img, 0, 0, W, H);

  ctx.globalCompositeOperation = "source-in";
  ctx.drawImage(img, 0, 0, W, H);
  
  requestId = window.requestAnimationFrame(draw);
}

window.onload = () => {
  canv.width = W;
  canv.height = H;

  setTimeout(() => {
    draw();
  }, 20);
}

.image {
     width: 100%;
      max-width: 100%;
      height: 100vh;
      display: block;
}
#canvas {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: 0.5s;
  display: block;
}

<div class="image">
<img src="https://superdevresources.com/wp-content/uploads/2015/12/new-york-background.jpg" alt="">
</div>
<canvas id="canvas"></canvas>