web-dev-qa-db-fra.com

Placer un <div> dans un <canvas>

Je prends un div dans un élément canvas comme suit:

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

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

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

html5canvas
44
thecodeparadox

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

Si vous souhaitez positionner des éléments sur la même zone qu'un canevas, voici une technique (parmi tant d'autres) qui vous permettrait 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 permet au contenu du div de s'écouler normalement et fait du canevas un arrière-plan du contenu:

CSS 

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