Eu cheguei a uma solução extremamente simples, mas com um pequeno problema que o código do professor também apresenta:

fiz igual.

Para abrir a tela já com a bandeira do Brasil, basta chamar a função desenhaBandeiraBrasil() antes de mudaBandeira(). Só que a bandeira do Brasil vai demorar, na primeira vez, 6 segundos na tela até mudar para a da Alemanha. Rsrs

Pois é. A minha demora 3 segundos para aparecer pela primeira vez, mas depois fica alternando corretamente a cada 3 segundos. Tentei de todo jeito corrigir esse delay inicial e não consegui. Fui verificar o código do professor e acontece o mesmo.

Para "corrigir" esse erro é só chamar antes e fora da sua função "mudaBandeira()" a função "desenhaBandeiraAlemanha()", pois a sequência do código ficará assim:

1º irá chamar a a função "desenhaBandeiraAlemanha()" que está fora da função. // coloquei da Alemanha, pq a sua ordem dentro da função é Brasil e depois Alemanha.

2º irá chamar a função "mudaBandeira()" que conta 3 segundos para começar executar

3º depois dos 3 segundos irá executar na ordem o 1º "desenhaBandeiraBrasil"

4º depois de mais 3 segundos irá executar na ordem o 2º "desenhaBandeiraAlemanha"

e assim fica.

Outra coisa, fiz um código igual ao seu, mas eu deixei os setIntervals fora e não precisei criar nenhuma função para executá-las.

Vou aqui para você ver o código que fiz.

Espero ter ajudado. Sucesso na sua jornada!!

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

<script>

function LimparTela(){
    pincel.clearRect(0,0,600,400);
}

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

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

    pincel.fillStyle="yellow";
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.fillStyle="darkblue";
    pincel.beginPath();

    pincel.arc(300, 200, 100, 0, 2* 3.14);
    pincel.fill();
}


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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 133);

    pincel.fillStyle = 'red';
    pincel.fillRect(0, 133, 600, 133);

    pincel.fillStyle = 'yellow';
    pincel.fillRect(0, 266, 600, 133);
}
    desenhaBandeiraAlemanha();
    setInterval(desenhaBandeiraBrasil,3000);
    setInterval(desenhaBandeiraAlemanha,6000);

</script>

Resolvi isso chamando desenhaBandeiraBrasil() antes de chamar mudaBandeira(). E também alterei a função mudaBandeira, colocando pra bandeira da Alemanha aparecer primeiro nela.

Assim, ao executar o código, aparece a bandeira do Brasil por 3 segundos (vinda do desenhaBandeiraBrasil), depois aparece a da Alemanha por 3 segundos (vinda do mudaBandeira), depois a do Brasil por mais 3 segundos (também vinda do mudaBandeira), depois a de Alemanha de novo e assim por diante. O resultado é exatamente o que foi pedido no exercício, e sem aqueles 3 em branco.

Alterei no seu código, e fica assim:

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

<script>

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

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

    pincel.fillStyle="yellow";
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.fillStyle="darkblue";
    pincel.beginPath();

    pincel.arc(300, 200, 100, 0, 2* 3.14);
    pincel.fill();
}

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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 133);

    pincel.fillStyle = 'red';
    pincel.fillRect(0, 133, 600, 133);

    pincel.fillStyle = 'yellow';
    pincel.fillRect(0, 266, 600, 133);
}
    function mudaBandeira () {
        setInterval(desenhaBandeiraAlemanha,3000)
        setInterval(desenhaBandeiraBrasil,6000)             
    }

    desenhaBandeiraBrasil();
    mudaBandeira();

</script>