Placer un <div>à l'intérieur d'un <canvas>

Question

Je prends un div dans un canvas élément comme le suivant :

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

Ici, les deux ont une hauteur et une largeur. Mais ici je ne peux pas voir le div !

N'est-il pas possible de prendre un div ou p dans un canvas ?

Answer 1

Vous ne pouvez pas placer des éléments à l'intérieur d'un canevas (et les faire afficher tous les deux) ; ils ne sont affichés que si le navigateur ne comprend pas l'élément canevas.

Si vous souhaitez positionner des éléments sur la même zone qu'un canevas, voici une technique (parmi d'autres) qui vous permettra de le faire :

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

Voici une autre technique, qui laisse le contenu de la division s'écouler normalement et fait de la toile un arrière-plan pour le contenu :

CSS

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