title: Detect if user clicks inside a circle
body: <p>How can I detect when the user clicks inside the red bubble?</p>
  
  <p>It should not be like a square field. The mouse must be really inside the circle:</p>
  
  <p><a href="https://i.stack.imgur.com/dylT0.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/dylT0.jpg" alt="img"></a></p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;canvas id="canvas" width="1000" height="500"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  var canvas = document.getElementById("canvas")
  var ctx = canvas.getContext("2d")
  
  var w = canvas.width
  var h = canvas.height
  
  var bubble = {
    x: w / 2,
    y: h / 2,
    r: 30,
  }
  
  window.onmousedown = function(e) {
      x = e.pageX - canvas.getBoundingClientRect().left
      y = e.pageY - canvas.getBoundingClientRect().top
  
      if (MOUSE IS INSIDE BUBBLE) {
          alert("HELLO!")
      }
  }
  
  ctx.beginPath()
  ctx.fillStyle = "red"
  ctx.arc(bubble.x, bubble.y, bubble.r, 0, Math.PI*2, false)
  ctx.fill()
  ctx.closePath()
  &lt;/script&gt;
  </code></pre>