Canvas Api , click event

[[email protected]]

I am trying to attach a click event to every individual circle in a 2d canvas matrix . I use a for-loop for creating the matrix , however i cannot assign click events to every single circle. The circles are acting as led lights and the click event either turns them off or on.If a pattern is generated , the canvas is saved as an image.  See the image attached. I could really use some help with this. I can't seem to figure it out.

[Sandcastle Games]

I expect it is not possible to have click events on each circle, since the circles are no HTML elements but rather something painted on a canvas.

I would use a single click event listener and check the x/y coordinates of the click. For simplicity you could rather check if the click was in the surrounding square of the circle. Then you just need to divide the x position by the spacing of the squares (probably removing an offset of the area left of the circles) and you get the column of the circle. Do the same with the y coordinate to calculate the row of the circle.

If you need to check for a click in the circle rather than the square, still calculate the column and row like above. Then calculate the middle point of the circle that is within the detected square and check the distance of the click from the middle point. If it is lower or equal the radius the click was in the circle. The distance would be calculated as square root of the square of the horizontal + the square of the vertical distance (i.e. sqrt(dx*dx + dy*dy)).