bandeira_brasil.html

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

</canvas>

<script>

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


    // Retângulo
    pincel.fillStyle = "green";
    pincel.fillRect(0,0,600,400)
     pincel.fill();

     // Triângulos
     // Triângulo  Esquerdo
     pincel.fillStyle = "yellow"
     pincel.beginPath();
     pincel.moveTo(80,200);
     pincel.lineTo(300,60);
     pincel.lineTo(300,340);
     pincel.fill();
      // Triângulo  Direito
     pincel.beginPath();
     pincel.moveTo(520,200);
     pincel.lineTo(300,60);
     pincel.lineTo(300,340);
     pincel.fill();
    // Circulo 
     pincel.fillStyle = "darkblue";
     pincel.beginPath();
     //  centro do circulo, raio. angulos iniciais e finais
     pincel.arc(300, 200, 100, 0, 2 * 3.14);
     pincel.fill();

</script>