fidel fidel - 6 months ago 10
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

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;
}
Comments