Add another image on top of a drawn image on canvas, then have it respond to onclick event, is it possible?

Question

Here's a canvas app I come across : canvasphoto (uses YUI 2 I believe, which I haven't used before). It displays images on a canvas and it lets you resize/move the images across the canvas. What I want to do is to add a close button on the top right side of the images drawn on the canvas and have it trigger an onclick event when clicked (I'd display a confirm button asking the user if he/she wants to remove the image).

Is this possible? If so, can you help me get started on this (resource/link for drawing an image on top of another image drawn on a canvas, basic canvas manipulation, etc.) Thanks!

Edit: solved the part where the image rendered will respond to click (on top right corner only). So, the only problem left is drawing the close button on the top right corner of the image.

Answer 1

There is no way for something drawn into a canvas to respond to events without additional work. Either you can store the position of the close box and have an onclick event on the canvas check if the click occurs within the rectangle, or you could place an element over the canvas where the rectangle has been drawn and use that to handle the click. A relatively positioned div with no contents would work.

Answer 2

Instead of drawing on the corkboard, a div with an image is rendered on the page above the top right corner of the image by setting a higher z-index than the canvas and and absolute position (with the coordinates of the top right corner, of course).