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

While it's true that you cannot create click events for objects drawn on the canvas there is a workaround: Wrap the canvas in a DIV tag and then add the images within the DIV tag above the CANVAS tag.

Then use CSS to make the images position:absolute and use left:*px and top:*px attributes to place the image over the canvas where you would have normally drawn it.

#img1{
position:absolute;
left: 10px;
top: 10px;
 }

You can then add click events to the image which is placed over the canvas giving the impression that you are clicking on the canvas(the below example uses the jQuery click() function)

$( "#img1" ).click(function(){
    alert("Thanks for clicking me");
});