CODEWITHSUNDEEP
htmlcanvas
tiiin4
tiiin4

Reputation: 539

Add elements to canvas html5

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.

Upvotes: 6

Views: 15700

Answers (2)

Ming-Tang
Ming-Tang

Reputation: 17651

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

Upvotes: 6

Quentin
Quentin

Reputation: 943578

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

Upvotes: 1

Related Questions