Tentei misturar esse código da bandeira com o dar flor | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Pensei em colocar o q aprendi nessa aula no código da flor. Como se fosse um gif animado. Tentei colocar pra aparecer uma flor e depois uma frase. Porém, não consegui. Alguém pode me ajudar?

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    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) {

        desenhaCirculo(x, y, 15, 'red')
        desenhaCirculo(x, y-30, 15, 'yellow')
        desenhaCirculo(x, y+30, 15, 'blue')
        desenhaCirculo(x-30, y, 15, 'orange')
        desenhaCirculo(x+30, y, 15, 'black')

    }
    //encremento com texto
    function desenhaTexto(texto, x, y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font= '20px Georgia';
        pincel.fillStyle= 'black';
        pincel.fillText(texto, x, y);
    }

    setInterval(desenhaTexto("Uma flor pra vc honey!", 50, 30), 3000);

    setInterval(desenhaFlor(300, 200), 1000);

</script>

Quando você usa o setInterval(desenhaFlor(300, 200), 1000) está chamando a 'function' para ser executada naquele momento, tirando a 'responsabilidade' do setInterval. Teria que ser setInterval(desenhaFlor, 1000), sem parênteses, para que o 'setInterval' execute o 'desenhaFlor'. Ou seja, se não pode ter os parênteses, não dá pra colocar os parâmetros 300 e 200. Então vejo duas alternativas. Ou faz as duas 'function' já com os valores numéricos digitados em cada instrução, ou faz uma 'function' que não recebe parâmetro, mas que chama sua 'function desenhaFlor'. O mesmo vale para o desenhaTexto.

Opção 1:

 function desenhaFlor() {                    //aqui os valores não tem variável
        desenhaCirculo(300, 200, 15, 'red')
        desenhaCirculo(300, 200-30, 15, 'yellow')
        desenhaCirculo(300, 200+30, 15, 'blue')
        desenhaCirculo(300-30, 200, 15, 'orange')
        desenhaCirculo(300+30, 200, 15, 'black')
 }

 function desenhaTexto() {                //aqui os valores não tem variável
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font= '20px Georgia';
        pincel.fillStyle= 'black';
        pincel.fillText("Uma flor pra vc honey!", 50, 30);
    }

    setInterval(desenhaTexto, 3000);        //sem parênteses na function
    setInterval(desenhaFlor, 1000);        //sem parênteses na function

Opção 2:

function desenhaFlor(x, y) {            //aqui suas function não foram alteradas
        desenhaCirculo(x, y, 15, 'red')
        desenhaCirculo(x, y-30, 15, 'yellow')
        desenhaCirculo(x, y+30, 15, 'blue')
        desenhaCirculo(x-30, y, 15, 'orange')
        desenhaCirculo(x+30, y, 15, 'black')
    }

function desenhaTexto(texto, x, y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font= '20px Georgia';
        pincel.fillStyle= 'black';
        pincel.fillText(texto, x, y);
    }
                                    //só muda daqui pra baixo

function chamaDesenhaFlor() {
        desenhaFlor(300, 200)        //aqui coloca os parâmetros
    }

function chamaDesenhaTexto()    {
        desenhaTexto("Uma flor pra vc honey!", 50, 30);    //aqui coloca os parâmetros
    }

setInterval(chamaDesenhaTexto, 3000);        //sem parênteses na function
setInterval(chamaDesenhaFlor, 1000);            //sem parênteses na function