Tive uma ideia sobre Pattern

No exercício das flores tem uma "provocação" para criar várias flores: quase fiz um pattern de flores, mais não ficou legal:

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

<script>

    function desenhaFlor (x,y){

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

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();

        for(var i=-20;i<=20;i=i+40){
                pincel.fillStyle = "purple";
                pincel.beginPath();
                pincel.arc(x+i,y,10,0,2*3.14);
                pincel.fill();
            for(var j=-20;j<=20;j=j+40){
                pincel.fillStyle = "purple";
                pincel.beginPath();
                pincel.arc(x,y+j,10,0,2*3.14);
                pincel.fill();
            }
        }
    }


    for(var x = 30; x < 600; x = x + 80){
        desenhaFlor (x,30);
        for(var y = 30; y < 400; y = y + 80){
            desenhaFlor (x,y);
        }
    }

</script>

Como o loop dos FOR's funcionou tentei outra coisa:

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

<script>

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

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

    function desenhaHexagono (x,y){


        pincel.fillStyle = "lightgray";
        pincel.beginPath();
        pincel.moveTo(x,y+32);
        pincel.lineTo(50+x,2+y);
        pincel.lineTo(98+x,32+y);
        pincel.lineTo(98+x,88+y);
        pincel.lineTo(50+x,118+y);
        pincel.lineTo(x,88+y);
        pincel.fill();
    }

    for(var x = 2; x < 600; x = x + 100){
        desenhaHexagono (x,2);
        for(var y = 0; y < 400; y = y + 120){
            desenhaHexagono (x,y);
        }
    }

</script>

Achei legalzinho, por isso compartinhei.