0

I would like to do the following;

After drawing a circle in a canvas, which have an "x" and "y" value to position it from it's center.

Would it be possible to listen for an event on that circle? For exemple: When I put my mouse over that circle it would display the "x" and "y" values.

Is there such a thing as event listening over drawings inside canvas element?

I have seen some pretty slick website that are full screened canvas and the elements inside react with the mouse position.

So I guess it is somehow possible. Maybe not as simple as what I'm explaining.

The other approach I tough of, since I already know the values of "x" and "y", would be to listen at the position of the mouse and if it match's a certain area of the circle then I could trigger an event.

But this option involve more programming then just a mouseHover event listening. I'm fairly new to canvas element and I would like to save time on this project.

MadeInDreams
  • 1,991
  • 5
  • 33
  • 64
  • 1
    you can get help from internet for example if you want to detect circle collision with a point ..http://stackoverflow.com/questions/481144/equation-for-testing-if-a-point-is-inside-a-circle or may be you can use libraries those have built in method to detect collision and other useful methods – Madhawa Priyashantha Mar 14 '16 at 05:26
  • Thank you. That's a good start. I guess I will have to take the long path. – MadeInDreams Mar 14 '16 at 05:29
  • 1
    You must listen for mouse events on the canvas as a whole and then hit-test versus each of your shapes (circles) to determine if the mouse is inside a particular shape. No shortcut to doing it that way. ;-) – markE Mar 14 '16 at 07:18

0 Answers0