bandeira um pouco diferente | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Bandeira 01

<canvas width="900" height="600">    </canvas> 
<script>
    var tela = document.querySelector('canvas'); 
    var pincel = tela.getContext('2d'); 

    pincel.fillStyle = 'green';  
    pincel.fillRect(0,0,900,600); 

    pincel.fillStyle = 'green';
    pincel.fillRect(0,0,300,600); 

    pincel.fillStyle = 'green';
    pincel.fillRect(300,0,300,600);    

    pincel.fillStyle = 'green';
    pincel.fillRect(600,0,300,600);

    pincel.fillStyle = 'yellow';
    pincel.beginPath(); 

    pincel.moveTo(450,50);
    pincel.lineTo(50,300); 
    pincel.lineTo(450,550);
    pincel.lineTo(850,300);
    pincel.fill()

    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(450,300,150,0,2*3.14);
    pincel.fill();
    pincel.fillStyle = 'white';
    pincel.fillRect(302,280,296,20); 
</script>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Bandeira 02

<canvas width="900" height="600">    </canvas> 
<script>
    var tela = document.querySelector('canvas'); 
    var pincel = tela.getContext('2d'); 

    pincel.fillStyle = 'lightgrey';  
    pincel.fillRect(0,0,900,600); 

    pincel.fillStyle = 'yellow';
    pincel.fillRect(0,0,300,600);  

    pincel.fillStyle = 'orange';
    pincel.fillRect(300,0,300,600);    

    pincel.fillStyle = 'khaki';
    pincel.fillRect(600,0,300,600);

    pincel.fillStyle = 'red';
    pincel.beginPath(); 
    pincel.moveTo(450,50);
    pincel.lineTo(50,300);
    pincel.lineTo(450,550);
    pincel.lineTo(850,300);
    pincel.fill()

    pincel.fillStyle = 'turquoise';
    pincel.beginPath();
    pincel.arc(450,300,150,0,2*3.14);
    pincel.fill();
</script>