How do I select a drawing on canvas?

Question

I wish to create a click-able object on a tag with javascript/jQuery.

This obviously dosen't work.

var cow = new Object();
cow = ctx.drawImage(tile,cursorH,cursorV);

$(cow).click{function(){
        alert('You clicked a cow!');
});

Answer 1

I don't think you can do it "right out of the box." Check out Fabric.js (demo) though, I believe it has support for drawing selectable objects to the canvas.

Answer 2

The solution is simple, but requires some groundwork be laid. First, you'll need to keep track of the "objects" you draw on the canvas. Perhaps create your own object class that keeps track of position and size. Secondly you override the onclick event for the canvas and perform a hit test on all your visible objects. The ones that are located under your cursor at the time of the click were clicked upon.