Is it possible to have a element within another element? I know i can layer them, but is this possible - <pre class="prettyprint"><code><canvas id="parent"> <canvas id="child"></canvas> </canvas> </code></pre> I tried but doesnt seem to work.

If you want to handle background and foreground separately, you could use two canvas and put one above the other with css. <pre class="prettyprint"><code><canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0"> </canvas> <canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1"> </canvas> </code></pre> Actually this one of the tips to improve canvas performance. Source: HTML5 Rocks

Nested CANVAS elements

Tags:

html

Is it possible to have a element within another element? I know i can layer them, but is this possible -

<canvas id="parent">
    <canvas id="child"></canvas>
</canvas>

I tried but doesnt seem to work.

317

asked Jun 10 '11 13:06

Abhineet

1 Answers

If you want to handle background and foreground separately, you could use two canvas and put one above the other with css.

<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1">
</canvas>

Actually this one of the tips to improve canvas performance. Source: HTML5 Rocks