Добавить элементы на холст HTML5

Question

Можно ли добавлять элементы внутри холста HTML5?

Например:

<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> 

Это ничего не показывает ... однако, если я помещу этот перетаскиваемый div внутри любого другого элемента в html, он работает ...

Что мне не хватает?

Thx.

Answer 1

Вы не можете добавлять элементы на холст таким образом. innerHTML холста отображается, когда браузер не поддерживает <canvas>. Вам следует добавить дополнительные элементы рядом с холстом или слой <div> над холстом.

<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>

Смотрите также: https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage#Fallback_content

Answer 2

Элементы холста заменяются элементами. Они отображают растровое изображение. Их содержимое, такое как <iframe> s и <object> s, предназначено для использования, когда элемент не поддерживается.

То, что вы пытаетесь сделать, сродни помещению элементов в изображение.

Содержимое элемента canvas, если оно есть, является запасным содержимым элемента.

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