Canvas images and Click event

Question

I have currently two circles in a tag with HTML5 & JavaScript.

Now I\'m trying to add an image (done) that changes based on mouse-ove

Answer 1

1. There is no "built-in" way of keeping track of shapes drawn on the canvas. They are not treated as objects, but rather just pixels in an area. If you want to handle events on shapes drawn on the canvas, you would need to keep track of the area each shape covers, and then determine which shape you're triggering the event for based on the mouse position.

2. You can just draw over other shapes if you want to replace it with something. You might want to take a look at globalCompositeOperation.

If you want to treat your drawings as objects, I would recommend using SVG instead of canvas.

Another option is to use buttons, and then style them using CSS.

Basically, what you're doing now really wasn't the intended purpose or use of the canvas. It's like using a pencil to hammer in nails - you're using the wrong tool for the job.