clipメソッド

// canvasのセットアップ
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 画像をロード
const img = new Image();
img.src = 'path_to_image.jpg';

img.onload = () => {
  // クリップ用の円を定義
  ctx.beginPath();
  const x = canvas.width / 2; // 中心のx座標
  const y = canvas.height / 2; // 中心のy座標
  const radius = 100; // 円の半径
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  
  // マスク（クリッピング領域）を適用
  ctx.clip();

  // 画像を描画
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // クリッピングの外側を黒く塗りつぶす
  ctx.globalCompositeOperation = 'destination-over';
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};