Размещение <div> внутри <canvas>

Я принимаю div внутри элемента canvas, например:

<canvas>
    <div></div>
</canvas>

Здесь у обоих есть высота и ширина. Но здесь я не вижу div!

Невозможно ли взять div или p в пределах canvas?

Ответы

Ответ 1

Вы не можете размещать элементы внутри холста (и отображаться оба); они отображаются только в том случае, если браузер не понимает элемент холста.

Если вы хотите позиционировать элементы над той же областью, что и холст, вот один из способов (среди многих), который позволит вам сделать это:

HTML

<div id="canvas-wrap">
  <canvas width="800" height="600"></canvas>
  <div id="overlay"></div>
</div>

CSS

#canvas-wrap { position:relative } /* Make this a positioned parent */
#overlay     { position:absolute; top:20px; left:30px; }

Здесь другой метод, который позволяет содержимому потока div нормально и делает холст фоном для содержимого:

CSS

#canvas-wrap { position:relative; width:800px; height:600px }
#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }