Creeper Detalhado

Hoje tive a atividade de criar um Creeper utilizando Canvas, , e pra sair um pouco do proposto, tentei fazer um com mais escalas de cores e menores quadrados de fundo . Confesso que ajudou muito em me localizar com pixels na imagem. Foi bastante ctrl + c , ctrl + v. Talvez o código tenha ficado muito grande , mas foi gratificante ver a imagem final rs

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

<script>

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


    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 600, 400,);

//Pale Green

    pincel.fillStyle = "#98FB98";
    pincel.fillRect(0, 0, 40, 40,);
    pincel.fillRect(240, 0, 40, 40,);
    pincel.fillRect(0, 200, 40, 40,);
    pincel.fillRect(40, 40, 40, 40,);
    pincel.fillRect(200, 40, 40, 40,);
    pincel.fillRect(320, 80, 40, 40,);
    pincel.fillRect(120, 160, 40, 40,);
    pincel.fillRect(160, 120, 40, 40,);
    pincel.fillRect(280, 200, 40, 40,);
    pincel.fillRect(40, 240, 40, 40,);
    pincel.fillRect(320, 240, 40, 40,);
    pincel.fillRect(80, 280, 40, 40,);
    pincel.fillRect(160, 280, 40, 40,);
    pincel.fillRect(240, 320, 40, 40,);
    pincel.fillRect(320, 320, 40, 40,);
    pincel.fillRect(0, 360, 40, 40,);
    pincel.fillRect(200, 360, 40, 40,);
    pincel.fillRect(360, 360, 40, 40,);




// Light Green

    pincel.fillStyle = "#90EE90";
    pincel.fillRect(40, 0, 40, 40,);
    pincel.fillRect(200, 0, 40, 40,);
    pincel.fillRect(360, 0, 40, 40,);
    pincel.fillRect(0, 240, 40, 40,);
    pincel.fillRect(120, 40, 40, 40,);
    pincel.fillRect(80, 160, 40, 40,);
    pincel.fillRect(320, 120, 40, 40,);
    pincel.fillRect(360, 160, 40, 40,);
    pincel.fillRect(320, 200, 40, 40,);
    pincel.fillRect(40, 280, 40, 40,);
    pincel.fillRect(200, 280, 40, 40,);
    pincel.fillRect(360, 280, 40, 40,);
    pincel.fillRect(80, 320, 40, 40,);
    pincel.fillRect(280, 320, 40, 40,);
    pincel.fillRect(40, 360, 40, 40,);
    pincel.fillRect(160, 360, 40, 40,);





//Shamrock Green

    pincel.fillStyle = "#009E60";
    pincel.fillRect(160, 0, 40, 40,);
    pincel.fillRect(0, 160, 40, 40,);
    pincel.fillRect(0, 80, 40, 40,);
    pincel.fillRect(80, 40, 40, 40,);
    pincel.fillRect(320, 40, 40, 40,);
    pincel.fillRect(200, 80, 40, 40,);
    pincel.fillRect(80, 240, 40, 40,);
    pincel.fillRect(40, 320, 40, 40,);
    pincel.fillRect(120, 320, 40, 40,);
    pincel.fillRect(280, 360, 40, 40,);


// Lime Green

    pincel.fillStyle = "#32cd32";
    pincel.fillRect(120, 0, 40, 40,);
    pincel.fillRect(320, 0, 40, 40,);
    pincel.fillRect(0, 280, 40, 40,);
    pincel.fillRect(0, 40, 40, 40,);
    pincel.fillRect(160, 40, 40, 40,);
    pincel.fillRect(360, 80, 40, 40,);
    pincel.fillRect(40, 120, 40, 40,);
    pincel.fillRect(160, 320, 40, 40,);
    pincel.fillRect(360, 320, 40, 40,);



//Medium Sea Green

    pincel.fillStyle = "#3CB371";
    pincel.fillRect(80, 0, 40, 40,);
    pincel.fillRect(280, 0, 40, 40,);
    pincel.fillRect(0, 120, 40, 40,);
    pincel.fillRect(200, 120, 40, 40,);
    pincel.fillRect(360, 120, 40, 40,);
    pincel.fillRect(320, 160, 40, 40,);
    pincel.fillRect(40, 200, 40, 40,);
    pincel.fillRect(360, 200, 40, 40,);
    pincel.fillRect(280, 240, 40, 40,);
    pincel.fillRect(320, 280, 40, 40,);
    pincel.fillRect(0, 320, 40, 40,);
    pincel.fillRect(200, 320, 40, 40,);





// Sea Green    

    pincel.fillStyle = "#2E8B57";
    pincel.fillRect(240, 40, 40, 40,);
    pincel.fillRect(360, 40, 40, 40,);
    pincel.fillRect(160, 80, 40, 40,);
    pincel.fillRect(240, 160, 40, 40,);
    pincel.fillRect(360, 240, 40, 40,);
    pincel.fillRect(280, 280, 40, 40,);
    pincel.fillRect(120, 360, 40, 40,);
    pincel.fillRect(240, 360, 40, 40,);




// Malachite

    pincel.fillStyle = "#0bda51";
    pincel.fillRect(280, 40, 40, 40,);
    pincel.fillRect(40, 80, 40, 40,);
    pincel.fillRect(40, 160, 40, 40,);
    pincel.fillRect(280, 160, 40, 40,);
    pincel.fillRect(80, 200, 40, 40,);
    pincel.fillRect(80, 360, 40, 40,);
    pincel.fillRect(320, 360, 40, 40,);







// Preto

    pincel.fillStyle = "black"
    pincel.fillRect(80, 80, 80, 80,);
    pincel.fillRect(240, 80, 80, 80,);
    pincel.fillRect(160, 160, 80, 120,);
    pincel.fillRect(120, 200, 40, 120,);
    pincel.fillRect(240, 200, 40, 120,);







</script>