Рисование изображения с использованием Raphael.js

Question

Можно ли поместить холст Raphael.js поверх элемента IMG? Что я должен сделать, чтобы этот макет работал?

Answer 1

Просто поместите холст Raphaël поверх элемента изображения, используя обычные методы CSS:

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

Затем вложите ваши элементы так:

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

Вот полный пример .

Answer 2

z-index: 2 или какое-то старшее число для "бумажного" div рафаэля (он же ваш холст Raphael ... на который вы ссылаетесь:

var paper = Raphael ('somediv', 100, 400)

, так что просто перейдите к css и в #somediv убедитесь, что вы поместили его z-index ниже, а затем поместили z-index вашего текстового div ...