Matris de quadrados com sombra.

Não é uma dúvida, só queria compartilhar meu código, pois estou orgulhoso do meu trabalho! HAHA

Neste código eu criei uma função "matriz", aonde você tem "matriz(mx,my,deep,cor1,cor2,size,dist)"

mx - Número de colunas; my - Número de linhas; deep - Profundidade de sombra; cor1 - Cor dos quadrados; cor2 - Cor da sombra projetada pelo quadrado; size - Tamanho do quadrado; dist - Distancia entre os dois quadrados. Edit: Implementei funções novas pois foi pedido em um exercício mais adiante.

=D

<canvas width="600" height="400" ></canvas>

<script type="text/javascript">

     function quadrado(x,y,sx,sy,cor1,cor2){

         var tela = document.querySelector('canvas');
         var pincel = tela.getContext('2d');

         pincel.fillStyle = cor1;
         pincel.fillRect(x,y,sx,sy);
        pincel.strokeStyle = cor2;
         pincel.strokeRect(x,y,sx,sy);

     }
     function matriz(mx,my,deep,cor1,cor2,size,dist) {
         for (var s = 1; s < deep; s++ ) {
              for (var x = 0; x < mx; x++ ) {
                 for (var y = 0; y < my; y++ ) {
                     quadrado((x * (size + dist) + s), (y * (size + dist) + s), size,size, cor2, cor2);
                 }
             }
         }

         for (var x = 0; x < mx; x++ ) {
             for (var y = 0; y < my; y++ ) {
                 quadrado((x * (size + dist)), (y * (size + dist)), size,size, cor1, cor2);
             }
         }

     }

     matriz(5,3, 5,'#EEEEEE',"#CCCCCC",50,7);



</script>