dominickudd@gmail.com

Canvas Api , click event

Recommended Posts

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.

Screenshot 2020-03-22 at 16.59.09.png

Share this post


Link to post
Share on other sites

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)).

 

 

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.