Usando o setInterval dentro de uma função

Olá Wagner,

Há 3 erros em seu código.

1. dentro da função limpaTela()

trocar:

clearRect(0, 0, 600, 400);

por:

pincel.clearRect(0, 0, 600, 400);

2 e 3.

dentro da função trocaBandeira()

trocar:

clearRect();

por:

pincel.clearRect(0, 0, 600, 400);

Porém mesmo com essas correções o código não funcionará conforme o esperado porque as duas funções setInterval são disparadas de modo assincrono e o que você verá será somente a bandeira da alemanha. Teste o seguinte código e você entenderá melhor:

setInterval(console.log("teste 1"), 3000);
setInterval(console.log("teste 2"), 3000);

Veja que o teste1 e o teste2 serão logados no console ao mesmo tempo, porque a segunda chamada não espera a primeira terminar, e mesmo que esperasse o teste2 não seria impresso porque o comando setInterval define o intervalo de execução de uma função em não o tempo a ser esperado antes ou depois de ela ser executada.

Wagner,

Continuando...

O comando abaixo irá imprimir "teste" de 3 em 3 segundos, como se fosse um loop infinito, faça um teste em seu navegador:

setInterval(function teste() {
        console.log("teste")
    }, 3000);

Para que o programa funcione intercalando a bandeira do Brasil com a bandeira da Alemanha de 3 em 3 segundo você pode implementar o código da seguinte forma:

Obs*: Aguarde 3 segundos para que a bandeira do Brasil seja exibida pela primera vez.

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

<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var bandeira = 'brasil';

    function bandeiraBrasil() {

        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 * Math.PI);
        pincel.fill();
    }

    function bandeiraAlemanha() {

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

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

        pincel.fillStyle = "yellow"
        pincel.fillRect(0, 266, 600, 400);
    }

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

    function trocaBandeira() {

        if (bandeira == 'brasil') {
            limpaTela();
            bandeiraBrasil();
            bandeira = 'alemanha';
        } else {
            limpaTela();
            bandeiraAlemanha();
            bandeira = 'brasil';
        }
    }

    setInterval(trocaBandeira, 3000);
</script>

Wagner,

Uma outra maneira de implementar o código de uma maneira mais semelhante da que você implementou é a seguinte:

Obs*: Essa versão iŕa apenas realizar a mudança da bandeira do Brasil para a bandeira da Alemanha uma única vez após 3 segundos:

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

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

    function bandeiraBrasil() {

        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 * Math.PI);
        pincel.fill();
    }

    function bandeiraAlemanha() {

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

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

        pincel.fillStyle = "yellow"
        pincel.fillRect(0, 266, 600, 400);
    }

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

    async function trocaBandeira() {

        await wait(3000)
            .then(limpaTela())
            .then(bandeiraBrasil());

        await wait(3000)
            .then(limpaTela())
            .then(bandeiraAlemanha());
    }

    function wait(t) {
        return new Promise(function(resolve) {
            window.setTimeout(resolve, t)
        });
    }

    trocaBandeira();
</script>

Muito obrigado, Guilherme.

Eu sempre esqueço de chamar essa variável do pincel antes de dar o comando. Só praticando pra ficar automático.

Em relação ao segundo código, ficou perfeito cara. Achei bem mais fácil de entender dessa maneira do que a solução apresentada pelo professor.

Valeu.