21 - CANVAS (otro canvas como patrón)

Problema:Confeccionar una página que tenga dos CANVAS, en el primero graficar una cruz y en el segundo graficar un cuadrado que cubra todo el canvas utilizando como patrón el primer canvas.

pagina.html
estilos.css
Ejecución de la página

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
function retornarLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas.getContext) {
    var lienzo = canvas.getContext("2d");   
    return lienzo;
  } else
    return false;
}

function dibujar() {
  var lienzo1=retornarLienzo("lienzo1");
  if (lienzo1) {
    lienzo1.strokeStyle="rgb(0,0,255)";
    lienzo1.beginPath();
    lienzo1.moveTo(25,0);
    lienzo1.lineTo(25,50);
    lienzo1.stroke();
    lienzo1.beginPath();
    lienzo1.moveTo(0,25);
    lienzo1.lineTo(50,25);
    lienzo1.stroke();
    var lienzo2=retornarLienzo("lienzo2");
    if (lienzo2) {
      var patron = lienzo2.createPattern(lienzo1.canvas,'repeat');
      lienzo2.fillStyle = patron;
      lienzo2.fillRect(0,0,300,300);            
    }  
  }  
}

</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="50" height="50"><br>
Su navegador no permite utilizar canvas.
</canvas>
<br>
<canvas id="lienzo2" width="300" height="300"><br>
Su navegador no permite utilizar canvas.
</canvas>

</body>

</html>

Retornar