Trocando da maneira mais difícil (de novo)

Como eu tentei um comando booleano antes mas, sem um motivo aparente, ela levava mais tempo em uma bandeira do que na outra, eu acabei criando uma variável de tempo com incremento para que ela levasse exatos 3seg para trocar. Segue como ficou o código alternativo (hehe):

<!-- bandeiras.html -->

<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);
    }

    var tempo = 0;

    var Brasil = desenhaBandeiraBrasil;
    var Alemanha = desenhaBandeiraAlemanha;

    function trocaBandeira(){

        if(tempo <= 1){

            Brasil();
            tempo++; 
        }

        if(tempo >= 2){

            Alemanha();
            tempo++;

            if(tempo == 3){

                tempo = 0;
            }
        }

    }



    setInterval(trocaBandeira, 3000);

</script>