Вы не можете размещать элементы внутри canvas
(и отображать оба элемента); они отображаются только в том случае, если браузер не понимает элемент canvas
.
Если вы хотите расположить элементы в той же области, что и canvas, вот один из множества способов, который позволит вам это сделать:
HTML
<div id="canvas-wrap">
<canvas width="800" height="600"></canvas>
<div id="overlay"></div>
</div>
CSS
#canvas-wrap { position:relative } /* Сделайте это позиционированным родителем */
#overlay { position:absolute; top:20px; left:30px; }
Вот еще один метод, который позволяет содержимому div нормально перемещаться и делает canvas фоном для содержимого:
CSS
#canvas-wrap { position:relative; width:800px; height:600px }
#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }
Свободный перевод ответа от участника @Phrogz.