Lienzo dentro de lienzo de html5

Question

¿Podemos colocar un lienzo dentro del lienzo existente? Si podemos, ayúdenos a hacerlo en html5.

Answer 1

Hay dos formas posibles de interpretar su pregunta. Una es que quiere decir que en realidad nido canvas elementos propios, como este:

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

Esto es legal (según validator.nu), pero sin sentido. El contenido dentro del elemento canvas es para el retroceso. La única forma en que se usa el contenido dentro del elemento canvas es si el navegador no es compatible con canvas, en cuyo caso el elemento interno canvas no se verá de todos modos.

La otra forma posible de interpretar su pregunta es ¿puede mostrar la imagen que se muestra en un lienzo dentro de otro? Esto es bastante sencillo, se puede usar un elemento canvas como el primer parámetro para context.drawImage(). Si tiene dos canvas elementos:

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

Entonces this script (using jQuery) se basará en la primera canvas y luego añadir que las cuatro veces una imagen para el segundo 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); 

Pero, de nuevo, ¿por qué lo haría? Puede replicar la imagen de la segunda canvas anterior 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); 

Así que en resumen: sí, es posible, pero no es realmente necesario en uso sencillo.

Answer 2

Sería absolutamente inútil anidar un lienzo dentro de otro lienzo. La página solo ve lo que está dentro de la etiqueta canvas si el navegador no es compatible con canvas. Así, acaba de hacer lo robertc dijo:
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>