canvasに表示した画像を丸で囲って表示する

やりたいこと

canvasにdrawImage()で貼り付けた画像を正円で表示させたい（丸型にトリミングされたように表示させたい）

やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜！？！？！？！数学できないよ〜！！」（数学関係あるかもわからない）って思ってたけど全然使わなかった

実装

一部抜粋

const image = new Image();
image.src = "表示したい画像";
image.onload = () => {
  ctx.beginPath();
  // 半径40pxの正円
  ctx.arc(50, 50, 40, 0, 2 * Math.PI);
  ctx.fill();  // 枠線表示したい場合はctx.stroke();にする
 
  // パスで切り抜く
  ctx.clip();

  // 80x80の画像を表示する
  ctx.drawImage(image, 10, 10, 80, 80);

  // 他の描画に影響が出ないようにrestoreする
  ctx.restore();
};

コード全文

See the Pen Untitled by miyata (@m1y474) on CodePen.