Add elements to canvas html5

Question

It is possible to add elements inside HTML5's canvas?

For example:

<canvas id="canvas2" width="650" height="850"> 
    <div class="draggable" class="ui-widget-content" width='100px' height='100px'>
       <textarea class="resizable" rows="2" cols="10" style="color: #FF0707; ">
        Example
       </textarea>
    </div>
</canvas> 

That doesn't show anything... however, if I put that draggable div inside any other element in the html it works...

What am I missing?

Thx.

Answer 1

You cannot add elements into the canvas like that. The innerHTML of the canvas is shown when a browser does not suport <canvas>. You should extra elements beside the canvas, or a <div> layer above the canvas.

<canvas id="canvas2" width="650" height="850"> 

</canvas>
<div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; z-index: 5;" class="draggable" class="ui-widget-content">
   <textarea class="resizable" rows="2" cols="10" style="color: #FF0707; ">
      Example
   </textarea>
</div>

See also: https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage#Fallback_content