html5, adding an eventlistener to a drawn image on canvas

Question

I am experimenting with html5 and I have a little image dropdown, the user selects and image and it draws it to the canvas using drawImage();

I can't seem to figure out how to add an event listener to the newly drawn image on the canvas.

I have tried putting it in a variable like so:

var newImg = ctx.drawImage(myImage, 200, 200);

and then adding an eventlistener to that, but it doesn't seem to work.

newImg.addEventListener('mousedown', onImgClick, false);

What is the correct way to do this.

Answer 1

If you're looking for this sort of interactivity, <canvas> is probably not what you want. You're looking for SVG. There is a fantastic library called Raphaël that makes working with SVG a piece of cake on all browsers, even on IE6. It's also completely compatible with jQuery, so you can do:

var paper = Raphael(10, 50, 320, 200);
var img = paper.image("/path/to/img.png", 10, 10, 80, 80);
$(img).click(onImgClick);

I'm pretty certain this will treat you better and be easier to use than <canvas>.

Note: Raphaël does come with some helpers for basic events like "click" and "mousedown", just do img.click(onImgClick), but if you're already using a library like jQuery, which you probably are, I'd recommend being consistent and using the library's event handling.

Answer 2

Canvas is not a retained-mode drawing surface. It's just a flat image; there is no object inside it to bind events to, and drawImage returns nothing.

You will have to detect clicks on the <canvas> and check if they are inside the [200, 200, 200+w, 200+h] rectangle manually. Or, if you want retained-mode drawing, consider using SVG instead of a canvas.