Trocando bandeiras

refiz meu código não sei quantas vezes até que vi um código de uma colega fiz uma implementação semelhante só que reparando meu código inicial

<!-- bandeiras.html -->

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

<script>

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

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

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

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

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

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


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

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

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

        context.fillStyle = 'yellow';
        context.fillRect(0, 266, 600, 133);
    }

    var intervalo = 1
    function trocaBandeira() {
        if(intervalo == 1){
            desenhaBandeiraBrasil()
            intervalo--
        }else if(intervalo == 0){
            desenhaBandeiraAlemanha()
            intervalo++
        }
    }

    desenhaBandeiraBrasil()

    setInterval(trocaBandeira, 3000)
</script>