Menu
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.
356
According to the HTML specification you can't access the elements of the Canvas. You can get its context, and draw in it manipulate it, but that is all. BUT, you can put both the Canvas and the html element in the same div with a a position: relative and then set the canvas and the other element to position: absolute .
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.
The CANVAS element allows you to add so much more interactivity to your web pages because now you can control the graphics, images, and text dynamically with a scripting language. The CANVAS element helps you turn images, photos, charts, and graphs into animated elements.
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
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
