JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    Canvas内をクリックするとパスの範囲内かどうか表示します
</p>
<canvas id="canvas"></canvas>
<div id="result"></div>

JavaScript

window.addEventListener('DOMContentLoaded', function() {
  onload();
}, false);

function onload() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  canvas.width = canvas.height = 500;
  fill(ctx);

  canvas.addEventListener('click', function(event) {
    var rect = event.target.getBoundingClientRect();
    document.getElementById('result').textContent =
      isPointInPath(ctx, event.clientX - rect.left, event.clientY - rect.top);
  }, false);
}
function path(ctx) {
  ctx.beginPath();
  ctx.moveTo(500, 250);
  ctx.arc(250, 250, 250, 0, 2 * Math.PI, true);
  ctx.arc(250, 250, 200, 0, 2 * Math.PI, false);
}
function fill(ctx) {
  path(ctx);
  ctx.fill();
}
function isPointInPath(ctx, x, y) {
  path(ctx);
  return ctx.isPointInPath(x, y);
}