Bandeira do Brasil | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Esse é um esboço da Bandeira do Brasil!

<body style="background:white; color:black; font-family:monospace">
    <h1 align="justify">Bandeira do Brasil</h1>

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

<script>

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

 // desenhando a retangulo maior
  pincel.beginPath();
  pincel.fillStyle = '#009c3b'; // cor verde oficial
  pincel.fillRect(0, 0, 600, 400);
  pincel.stroke();
  pincel.fill();

//desenhando o losângulo
  pincel.fillStyle = '#ffdf00'; // cor amarela crayola
  pincel.moveTo(300,50);
  pincel.lineTo(50,200);
  pincel.lineTo(300,350);
  pincel.lineTo(550,200);    
  pincel.fill();

// desenhando a circunferencia       
  pincel.fillStyle = '#002776'; // cor azul 
  pincel.beginPath();
  pincel.arc(300, 200, 125, 0, 2 * 3.14);
  pincel.fill();

  // desenhando o retangulo menor    
  pincel.fillStyle = 'white';
  pincel.moveTo(110,75);
  pincel.arc(75,75,35,0,Math.PI,false);  

  pincel.fillStyle = 'white';
  pincel.beginPath();
  pincel.fill();
  pincel.fillRect(175,180,250,35);

  </script>



</body>