Add elements to canvas html5

It is possible to add elem开发者_JS百科ents 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.

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

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