Drawing over an image using Raphael.js

Question

Can I put a Raphael.js canvas over an IMG element? What should I do make this layout work?

Answer 1

Simply position the Raphaël canvas over the top of the image element using normal CSS techniques:

#wrapper {
    position: relative;
    padding: 0;
    outline: 1px solid #999;
}
#wrapper img {
    position: absolute;
    top: 0;
    left: 0;
}
#canvas {
    position: absolute;
    top: 0;
    left: 0;
}

Then nest your elements like this:

<div id="wrapper">
    <img src="myimage.jpg">
    <div id="canvas">  
    </div>
</div>

Here's a full example.