canvasでつくる円形のくり抜きレイヤー

こういう円形のくり抜きレイヤーをcanvasで気軽に描画する。

HTML

<canvas id="image" style="height: 300px; width: 300px;" height="300" width="300"></canvas>

JavaScript

var image = new Image()

image.onload = function() {
  canvas = document.getElementById("image");
  context = canvas.getContext("2d");

  context.fillStyle = "rgba(0, 0, 0, 0.5)";
  context.fillRect(0, 0, 300, 300);

  context.fillStyle = "rgb(255, 255, 255)";
  context.globalCompositeOperation = "destination-out";
  context.arc(150, 150, 150, 0, Math.PI * 2);
  context.fill();

  context.globalCompositeOperation = "destination-over";
  context.drawImage(image, 0, 0, 300, 300)
}

image.src = "https://frenchmoments.eu/wp-content/gallery/nancy-place-stanislas/copyright-french-moments-place-stanislas-nancy-8.jpg"