fidel fidel - 1 year ago 66
Javascript Question

overlaping canvas a div using javascript

is it possible to combine a canvas and a div i have tried to work them together but i cant get it to work

here is my Div

<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>


this is canvas

<canvas id=demo width=400 height=300></canvas>


here is the complete code it is not mine please view How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

Answer Source

You can place both in a container and use absolute positioning, as so:

<div id="container">

<canvas id=demo width=400 height=300></canvas>

<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>

</div>

and then in the style sheet:

#container {
    position: relative;
}
#demo, div[href="#"] {
    position: absolute;
    top: 0px;
    left: 0px;
}