Mostrar a bandeira do Brasil por 3 segundos e depois da Alemanha, sempre intercalando!//Não utilizei if's posso considerar como uma forma correta ?

Oi Gilmar, tudo bem? Acho essa uma ótima solução inicial. Você fez com que as bandeiras fossem trocadas sem depender de um if. Funciona bem certo? Tá correto pra intenção.

Agora um desafio, você consegue pensar em uma forma de não repetir esse trecho de código?

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

Opa blz e vc? coloco ele apenas dentro do "script" e elimino ele dentro das funções

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

<script>

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


function desenhaBandeiraBrasil() {

    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() {

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




function trocaBandeira(){


    setInterval(desenhaBandeiraBrasil,3000);

    setInterval(desenhaBandeiraAlemanha,6000);


}

trocaBandeira();



</script>

Ótimo Gilmar, aceita mais um desafio? No geral, duplicação de código não é uma boa prática e você já resolveu essa parte, mas agora a gente tem outro problema.

O problema é que você está criando e acessando variáveis globais, que existem foram da função. Você está alterando valores sem recebê-los por parâmetro.

Até temos a documentação da função setInterval: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

Será que a gente consegue pegar o canvas e o pincel e passá-los por parâmetro para as funções que desenham a bandeira? Assim você pode criar as variáveis apenas dentro da função que troca as bandeiras. Entende?

Acho que esse é o último passo de melhoria do código neste estágio. Enquanto for estudando, você vai aprender novas formas. :)

Consegue esse?

Seria isso ?

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

<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');



function desenhaBandeiraBrasil() {
    trocaBandeira();


    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() {
    trocaBandeira();


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




function trocaBandeira(){


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




}

setInterval(desenhaBandeiraBrasil,3000);

setInterval(desenhaBandeiraAlemanha,6000);




</script>

Opa Gilmar, eu quis dizer assim:

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

<script>


function desenhaBandeiraBrasil(tela, pincel) {

    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(tela, pincel) {

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




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

    setInterval(desenhaBandeiraBrasil, 3000, tela, pincel);
    setInterval(desenhaBandeiraAlemanha, 6000, tela, pincel);
}

trocaBandeira();

</script>

Eu testei dessa forma porém não troca as bandeiras

Puxa Gilmar, eu testei e funcionou pra mim. Que navegador e versão você está usando? De qualquer forma não se prenda muito a isso. Você pode ficar com a primeira melhora que fez. Aprenderá recursos mais avançados depois quando estudar mais :)

Funcionou !!!

Ótimo Gilmar! Qualquer dúvida estamos aqui! Bons estudos!