Fui escalando um pouco e fiz isso!

<canvas width="1200" height="800"></canvas>

<script>

    const tela = document.querySelector('canvas');
    const pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgreen';
    pincel.fillRect(0, 0, 1200, 800);

    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, raio) {
        desenhaCirculo(x, y+20, raio, 'orange');
        desenhaCirculo(x, y, raio, 'red');
        desenhaCirculo(x, y-20, raio, 'yellow');
        desenhaCirculo(x-20, y, raio, 'black');
        desenhaCirculo(x+20, y, raio, 'blue');
    }

    function desenhaFlorMaior(x, y, raio) {
        desenhaCirculo(x, y+40, raio, 'orange');
        desenhaCirculo(x, y, raio, 'red');
        desenhaCirculo(x, y-40, raio, 'yellow');
        desenhaCirculo(x-40, y, raio, 'black');
        desenhaCirculo(x+40, y, raio, 'blue');
    }

    function mapaDeFlores (x, y, raio) {
        desenhaFlor(x-200, y, raio);
        desenhaFlor(x, y, raio);
        desenhaFlor(x+200, y, raio);
        desenhaFlor(x-100, y-100, raio);
        desenhaFlor(x-100, y+100, raio);
        desenhaFlor(x+100, y-100, raio);
        desenhaFlor(x+100, y+100, raio);
    }

    function telaDeFlores (x, y, raio) {
    mapaDeFlores(x, y, raio);
    mapaDeFlores(x+600, y, raio);
    }

    function paginaDeFlores (x, y, raio) {
    telaDeFlores(x, y, raio);
    telaDeFlores(x, y+400, raio);
    }

    function buque() {
    desenhaFlorMaior(600, 400, 20);
    paginaDeFlores(300, 200, 10);
    }

    buque();

</script>

Saiu algo como isso: