Apenas gostaria de compartilhar, que fiz o código diferente, mas também funcionou!!!
<canvas width="700" height="490"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function desenhaBandeiraBrasil() {
// Retângulo
pincel.fillStyle = 'rgb(0, 156, 59)';
pincel.fillRect(0, 0, 700, 490);
// Losango
pincel.fillStyle = 'rgb(255, 223, 0)';
pincel.beginPath();
pincel.moveTo(350, 59.5);
pincel.lineTo(59.5, 245);
pincel.lineTo(640.5, 245);
pincel.fill();
pincel.beginPath();
pincel.moveTo(350, 430.5);
pincel.lineTo(59.5, 245);
pincel.lineTo(640.5, 245);
pincel.fill();
// Círculo
pincel.fillStyle = 'rgb(0, 39, 118)';
pincel.beginPath();
pincel.arc(350, 245, 122.5, 0, 2 * 3.14159);
pincel.fill();
}
function desenhaBandeiraAlemanha() {
// Retângulo_01
pincel.fillStyle = '#000000';
pincel.fillRect(0, 0, 700, 140);
// Retângulo_02
pincel.fillStyle = '#FF0000';
pincel.fillRect(0, 140, 700, 140);
// Retângulo_03
pincel.fillStyle = '#FFCC00';
pincel.fillRect(0, 280, 700, 140);
}
function limpaTela() {
pincel.clearRect(0, 0, 700, 490);
}
var troca = 1;
function trocaBandeira() {
if(troca == 1) {
limpaTela();
desenhaBandeiraBrasil();
troca++
} else {
limpaTela();
desenhaBandeiraAlemanha();
troca--;
}
}
setInterval(trocaBandeira, 3000);
</script>
