If I have a canvas with a circle that changes color upon clicking on it, I can use a click event on the canvas element and handle the math for that (distance formula calculation <= radius). But what if I have two circles that overlap (like a van diagram), and I click in the middle of the two circles assuming that only the top circle should change color? If the math of the first circle is applied in this case, both circles would change color.
How would I deal with events in the canvas in terms of overlapping objects like the example above? With hopefully a fast/efficient algorithm?
You might want a framework like EaselJS that has a better api for what you’re trying to do. Barebones canvas 2d-context doesn’t provide much in terms of display-object / sprite behavior.
Responses above also mention some sort of list to represent layers. I don’t think the implementation would be very difficult, just another condition to check for along with the radius.