использование назначения холста в анимации, не работающей в chrome и firefox

Question

Я пытался реализовать анимацию на холсте с «получателем», но она не работает в chrome и firefox. Но это работает в сафари.

Хром; захват изображения с chrome

Safari; захват изображения из сафари

Может быть, я знаю, что мне не хватает?

Пример кода будет очень понятен ..

const $video = document.getElementById("video")
const $canvas = document.getElementById("canvas");
const $mask = document.getElementById("mask");

const ctx = $canvas.getContext("2d");
const maskCtx = $mask.getContext("2d");

maskCtx.fillStyle = "#FF0000";
maskCtx.fillRect(10, 10, 50, 50)

const run = () => {
  ctx.drawImage($video, 0, 0, 300, 200)
  ctx.globalCompositeOperation = "destination-out";
  ctx.drawImage($mask, 0, 0, 300, 200)

  window.requestAnimationFrame(run)
}

$video.onloadeddata = () => {
  run()
 
}

video, canvas {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

<video id="video" autoplay muted loop src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<canvas id="canvas"></canvas>
<canvas id="mask"></canvas>