Minha bandeira - SOLUÇÃO

Para fazer pensei nas cordenadas do plano cartesiano, X e Y o mais complicado foi fazer as pontas dos triangulos, mas com esse exercicio consegui por em pratica tudo isso.

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

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

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0,0,600,400);

    pincel.fillStyle = "green"; //retangulo
    pincel.fillRect( 50,  50,   500,    300); 

                    //x   y  largura, altura essa INVERSAO É SO p/ o RETANGULO [__]

/* X <horizontal>
  --- esquerda e direita ---
      vai para a direita = diminuindo o numero
      vai para esquerda = aumentando o numero

       Y <vertical                    
 --- cima e baixo --- 
       desce = se aumentar o numero 
       sobe=  se diminuir o numero

       largura = vai deixar + largo aumentando o numero
       altura = vai deixar + alto aumentando o numero    */

       pincel.fillStyle = "yellow";
       pincel.beginPath();
       pincel.moveTo(300, 90);
       pincel.lineTo(110,200); // 1 linha ESQUERDA 
       pincel.lineTo(500,200); //2 linha DIREITA
       pincel.fill();


 /* TRIANGULO 1

 moveTO 
   Y <vertical>

 Quanto - menor o numero mais para cima
 Quanto + maior o numero mais para baixo

  X <horizontal>

vai mexer na PONTA de cima do TRIANGULO

esquerda  - diminui o numero se movimenta para esquerda
direita -  aumenta o numero


LINHA 1 X1 = vai para esquerda 
 - diminuir o numero para ficar maior
 - AUMENTAR o numero fica menor

LINHA 2 X2 = vai para direita  
 - aumentar o numero para ficar maior
 - diminuir o numero fica MENOR



  */

      //TRIANGULO 2


       pincel.fillStyle = "yellow";
       pincel.beginPath();
       pincel.moveTo(300, 300);
       pincel.lineTo(110,200); // 1 linha ESQUERDA 
       pincel.lineTo(500,200); // 2 linha DIREITA
       pincel.fill();


       //ESFERA


       pincel.fillStyle="darkblue";
       pincel.beginPath();
       pincel.arc(300, 200, 70, 0, 2*3.14);
       pincel.fill();



</script>