Placing a <div> within a <canvas>

Question

I take a div within a canvas element like following:

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

Here both of them has height and width. But here I can't see the div!

Is it not possible to take a div or p within a canvas?

Answer 1

You cannot place elements inside a canvas (and have both displayed); they are only displayed if the browser does not understand the canvas element.

If you would like to position elements over the same area as a canvas, here is one technique (among many) that would let you do it:

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

Here's another technique, which lets the content of the div flow normally and makes the canvas a background to the content:

CSS

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