troca bandeiras

a princípio pensei no mais fácil e testei: colocar a função da bandeira do brasil pra atualizar a cada 6 segundos e a outra bandeira (mudei para a bandeira Trans) para cada 3 segundos. dá certo, cada uma fica na tela por 3 segundos, MAS a tela começa vazia, só depois de 3 segundos é desenhada a 1a bandeira. taí o código se quiser testar:

<!-- bandeiras.html -->

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

<script>

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

        pincel.fillStyle = 'darkgreen'; //fundo da bandeira do brasil
        pincel.fillRect(0, 0, 600, 400);

        pincel.fillStyle = 'yellow'; //losango amarelo
        pincel.beginPath();
        pincel.moveTo(0, 200);
        pincel.lineTo(300, 0);
        pincel.lineTo(600, 200);
        pincel.lineTo(300, 400);
        pincel.fill();

        pincel.fillStyle = 'darkblue'; //círculo azul
        pincel.beginPath();
        pincel.arc(300, 200, 125, 0, 2*3.14);
        pincel.fill();

        pincel.fillStyle = 'white'; //faixa branca
        pincel.beginPath();
        pincel.moveTo(180, 160);
        pincel.lineTo(427, 200);
        pincel.lineTo(420, 240);
        pincel.lineTo(172, 200);
        pincel.fill();
    }


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

        pincel.fillStyle = 'lightblue'; //fundo da bandeira trans
        pincel.fillRect(0, 0, 600, 400);

        pincel.fillStyle = 'pink'; // faixas cor de rosa
        pincel.fillRect(0, 80, 600, 240);

        pincel.fillStyle = 'white'; //faixa branca
        pincel.fillRect(0, 160, 600, 80);
    }

    setInterval(desenhaBandeiraTrans, 3000);

    setInterval(desenhaBandeiraBrasil, 6000);

</script>

pra não ficar com esses 3 segundos de tela vazia, eu criei a função trocaBandeiras() e coloquei os setInterval dentro dela, depois chamei a função da bandeira do brasil (porque na função de troca comecei com a bandeira Trans) e a troca bandeiras consecutivamente, assim primeiro é desenhada a bandeira do brasil e depois de 3 segundos é feita a troca para a Trans e as trocas não param mais.

<!-- bandeiras.html -->

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

<script>

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

        pincel.fillStyle = 'darkgreen'; //fundo da bandeira do brasil
        pincel.fillRect(0, 0, 600, 400);

        pincel.fillStyle = 'yellow'; //losango amarelo
        pincel.beginPath();
        pincel.moveTo(0, 200);
        pincel.lineTo(300, 0);
        pincel.lineTo(600, 200);
        pincel.lineTo(300, 400);
        pincel.fill();

        pincel.fillStyle = 'darkblue'; //círculo azul
        pincel.beginPath();
        pincel.arc(300, 200, 125, 0, 2*3.14);
        pincel.fill();

        pincel.fillStyle = 'white'; //faixa branca
        pincel.beginPath();
        pincel.moveTo(180, 160);
        pincel.lineTo(427, 200);
        pincel.lineTo(420, 240);
        pincel.lineTo(172, 200);
        pincel.fill();
    }


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

        pincel.fillStyle = 'lightblue'; //fundo da bandeira trans
        pincel.fillRect(0, 0, 600, 400);

        pincel.fillStyle = 'pink'; // faixas cor de rosa
        pincel.fillRect(0, 80, 600, 240);

        pincel.fillStyle = 'white'; //faixa branca
        pincel.fillRect(0, 160, 600, 80);
    }

    function trocaBandeiras(){
        var tempo = 3000

        setInterval(desenhaBandeiraTrans, tempo);

        setInterval(desenhaBandeiraBrasil, tempo*2);

    }

    desenhaBandeiraBrasil();
    trocaBandeiras();

</script>