Detect if user clicks inside a circle

by

A circle, is the geometric position of all the points whose distance from a central point is equal to some number “R”.

You want to find the points whose distance is less than or equal to that “R”, our radius.

The distance equation in 2d euclidean space is d(p1,p2) = root((p1.x-p2.x)^2 + (p1.y-p2.y)^2).

Check if the distance between your p and the center of the circle is less than the radius.

Let’s say I have a circle with radius r and center at position (x0,y0) and a point (x1,y1) and I want to check if that point is in the circle or not.

I’d need to check if d((x0,y0),(x1,y1)) < r which translates to:

Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0)) < r

In JavaScript.

Now you know all these values (x0,y0) being bubble.x and bubble.y and (x1,y1) being x and y.

More Related Contents:

  1. Detect if user clicks inside a circle
  2. HTML “overlay” which allows clicks to fall through to elements behind it [duplicate]
  3. Javascript Detect click event outside of div [duplicate]
  4. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  5. Capture HTML Canvas as gif/jpg/png/pdf?
  6. Resizing an image in an HTML5 canvas
  7. Get pixel color from canvas, on mousemove
  8. Why does canvas.toDataURL() throw a security exception?
  9. Zoom Canvas to Mouse Cursor
  10. Can I call jQuery’s click() to follow an link if I haven’t bound an event handler to it with bind or click already?
  11. How can I capture the right-click event in JavaScript? [duplicate]
  12. Zoom in on a point (using scale and translate)
  13. how to save canvas as png image?
  14. adding ‘click’ event listeners in loop [duplicate]
  15. Does HTML5/Canvas Support Double Buffering?
  16. HTML5 Canvas camera/viewport – how to actually do it?
  17. Attach an event in a child iframe to a handler in the parent window
  18. jQuery click anywhere in the page except on 1 div
  19. How to resize html canvas element?
  20. event.offsetX in Firefox
  21. How do I rotate a single object on an html 5 canvas?
  22. Javascript – Dynamically assign onclick event in the loop
  23. addEventListener for keydown on Canvas
  24. jQuery: How to listen for DOM changes?
  25. How to save canvas animation as gif or webm?
  26. canvas.toDataURL() Security Error The operation is insecure
  27. clearing circular regions from HTML5 Canvas
  28. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  29. Snap edges of objects to each other and prevent overlap
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment