Pq a demora para começar?

Fiz meu código e ficou semelhante ao do professor, mas ele conta o tempo em uma tela branca antes de iniciar com a função na tela, considerando que a comparação no 'if' dá a condição para chamar a função desenhaBandeiraBrasil segue o código:

<meta charset="utf-8">
<h1>Bandeira Barsil/Alemanha</h1>
<hr><br>

<canvas width="600" height="400"></canvas>
<script type="text/javascript">

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*Math.PI);
    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;

function trocaBandeira() {

    if (tempo == 0) {
    desenhaBandeiraBrasil();
    tempo++;
    } else {
    desenhaBandeiraAlemanha();
    tempo=0;
    }
}


setInterval(trocaBandeira, 3000);

</script>