Question

Here is my problem for today, I try to draw something on an <img> this is a structure

<div id='...' style='position:relative;'>
  <img id='...' style='posistion:absolute;' />
  <canvas id ='...' style='position:absolute;' />
</div>

img in css has already

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;

How can i draw a canvas ON the image? For now it go behind. I can’t use z-index on canvas. I tried making other divs. It has to be an img. Should i use something else instead of canvas? I could use other div but the paths i want to draw are not really simple and has to be resizable when image is bigger/smaller and still look fine.
Thanks in advice, hope everyone understood my english.

to make it more clear what i want here is a code when canvas is behind. When I prepend not append canvas an image is gone. I want to put a path to show user that this is already deleted but there are sometimes on this screen many other divs so i want to put canvas on a IMG or a DIV the img is in. It has to be in front of because when img is large we will not see path under. Here is a link
https://dl.dropbox.com/u/6421191/canvasbehind.jpg

Answer 1

HTML

<div id='mydiv' >
  <img id='myimage' src="http://placekitten.com/200/385" />
  <canvas id ='mycanvas'  width="200" height="100" />
</div>

CSS

div#mydiv{
    position: relative;
}
#myimage{
     position: relative;
}
#mycanvas{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #333;
}

I think this is what you are trying do.

Have one image on the background and display the canvas area on top of the image?

I hope my little sample code helps you out.