um jardinzim

tá mais pra um padrão de azulejo kk mas se 5 bolinhas podem ser uma flor, ele pode ser um jardim!

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }

    function desenhaFlor(x, y, cor){

        var raio = 5
        desenhaCirculo(x+raio, y, raio, cor);
        desenhaCirculo(x-raio, y, raio, cor);
        desenhaCirculo(x, y+raio, raio, cor);
        desenhaCirculo(x, y-raio, raio, cor);
        desenhaCirculo(x, y, raio, 'yellow');
    }


    for (var linha = 0; linha <= 600; linha += 80 ){

        for (var coluna = 0; coluna <= 400; coluna += 80){

            desenhaFlor(linha, coluna, 'blue');
        }
    }

    for (var linha = 40; linha <= 600; linha += 80 ){

        for (var coluna = 40; coluna <= 400; coluna += 80){

            desenhaFlor(linha, coluna, 'purple');
        }
    }

</script>

acrescentando outros for com novos valores na var linha e var coluna dá pra deixar o jardim ainda mais cheio.. em cada for dá pra mudar a cor e assim ele também vai ficando mais colorido... além disso, dá pra mudar o raio das flores e o resultado fica bem legal! jogando com cores diferentes os padrões de azulejo vão aparecendo hahaha