Nested CANVAS Elements

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

Solution 1:

The canvas specification does not allow for this. The canvas element may be used in an embedded content context; nesting a canvas element places it in a fallback content context, which is not supported.

Solution 2:

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

Solution 3:

You might want to consider doing a virtual embedding by translating to various positions on your canvas.

Here's an example of doing this:

http://marketimpacts.com/storage/9781118385357%20ls0702%20Complex%20Objects.htm

It's from:

http://www.amazon.com/HTML5-Canvas-For-Dummies-Cowan/dp/1118385357/ref=cm_cmu_up_thanks_hdr

Solution 4:

You can, as Isaac Zepeda said in his answer, you need to have different canvas id's and z indexes. You also need to name almost all of the variables and functions for each canvas something different so that you don't draw on canvas A when you mean to draw on canvas B.