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.

Solution 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

Solution 2

Canvas elements are replaced elements. They render a bitmap. Their content, like that of <iframe>s and <object>s is for use when the element is not supported.

What you are trying to do is akin to putting elements inside an image.

The contents of the canvas element, if any, are the element's fallback content.

— http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element