Toile à l'intérieur de la toile de html5

Question

Pouvons-nous placer une toile à l'intérieur de la toile existante? Si nous pouvons, s'il vous plaît aider à le faire en html5.

Answer 1

Il existe deux façons d'interpréter votre question. La première est que vous voulez dire à réellement nid canvas éléments eux-mêmes, comme celui-ci:

<canvas id="outer"> 
    <canvas id="inner"></canvas> 
</canvas> 

C'est légal (selon validator.nu) mais inutile. Le contenu à l'intérieur de l'élément canvas est destiné au remplacement. La seule façon dont le contenu à l'intérieur de l'élément canvas est utilisé est si le navigateur ne prend pas en charge canvas, auquel cas l'élément interne canvas ne sera pas vu de toute façon.

L'autre façon possible d'interpréter votre question est que vous pouvez afficher l'image affichée sur une toile dans une autre. C'est assez simple, un élément canvas peut être utilisé comme premier paramètre à context.drawImage(). Si vous avez deux canvas éléments:

<canvas id="c1" width="200" height="200"></canvas> 
<canvas id="c2" width="200" height="200"></canvas> 

Ensuite this script (using jQuery) attireront le premier canvas puis ajouter que quatre fois une image à la seconde canvas:

var c1 = $('#c1'); 
var ctx1 = c1[0].getContext('2d'); 

ctx1.fillRect(50,50,100,100); 

var c2 = $('#c2'); 
var ctx2 = c2[0].getContext('2d'); 

ctx2.drawImage(c1[0],0,0,100,100); 
ctx2.drawImage(c1[0],100,0,100,100); 
ctx2.drawImage(c1[0],0,100,100,100); 
ctx2.drawImage(c1[0],100,100,100,100); 

Mais encore une fois, pourquoi voulez-vous? Vous pouvez reproduire l'image du second canvas ci-dessus just using one:

var c1 = $('#c1'); 
var ctx1 = c1[0].getContext('2d'); 

ctx1.fillRect(25,25,50,50); 
ctx1.fillRect(125,25,50,50); 
ctx1.fillRect(25,125,50,50); 
ctx1.fillRect(125,125,50,50); 

Donc, en résumé: oui, il est possible, mais ce n'est pas vraiment nécessaire dans l'utilisation simple.

Answer 2

Il serait absolument inutile d'imbriquer une toile à l'intérieur d'une autre toile. La page ne voit que ce qui est à l'intérieur de la balise canvas si le navigateur ne prend pas en charge le canvas. Alors, faites tout ce que RobertC dit:
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>