CODEWITHSUNDEEP
html
Abhineet
Abhineet

Reputation: 121

Nested CANVAS elements

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.

Upvotes: 12

Views: 10233

Answers (4)

StarSweeper
StarSweeper

Reputation: 417

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.

Upvotes: -1

Don Cowan
Don Cowan

Reputation: 1

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

Upvotes: -1

Isaac Zepeda
Isaac Zepeda

Reputation: 300

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

Upvotes: 10

Giles Burdett
Giles Burdett

Reputation: 360

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.

Upvotes: 19

Related Questions