javascript - html5, adding an eventlistener to a drawn image on canvas - Stack Overflow

admin管理员组

文章数量:1322838

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.

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.

• javascript
• html

Share Improve this question Follow asked Apr 18, 2010 at 23:53 pfuncpfunc 1,30522 gold badges2424 silver badges5252 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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 pletely patible 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 e 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 remend being consistent and using the library's event handling.

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.

To do this without the help of JS:

Although you can't attach an event listener to the context on which you call drawImage(); you CAN attach event listeners to the Canvas itself.

myCanvasElement = document.getElementById('canvasElement');
myCanvasElement.addEventListener("click", someFunction, false);

If you need to have this per-image that you draw, you could probably stack the canvas objects and create a new one for each image you draw.

本文标签： javascriptHTML5adding an eventlistener to a drawn image on canvasStack Overflow