0

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)

Community
  • 1
  • 1
fidel
  • 89
  • 1
  • 9

1 Answers1

2

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;
}
  • .container { width: 500px; height: 500px; border: 2px solid; position: relative; overflow: auto; } canvas, div[href="#"] { position: absolute; top: 0px; left: 0px; } – fidel May 24 '16 at 00:40
  • You can adjust the positioning as you please; I used 0 and 0 so they'd overlap in top left corner, as an example. :) –  May 24 '16 at 00:44
  • one last question are you still there? – fidel May 24 '16 at 00:46
  • how can i manipulate the font size of font = '64px impact', to id="size" i want to let the user change the size as he wishes – fidel May 24 '16 at 00:47
  • If you have further questions please open up another question and be more specific. –  May 24 '16 at 00:48
  • let me make another question ill send you the link please wait – fidel May 24 '16 at 00:52