Olá, Segue minha versão da bandeira:
<canvas width="600" height="400"></canvas> <!--Definição do tamanho do Canvas-->
<script>
//Script da tela e do pincel//
var tela=document.querySelector('canvas');
var pincel=tela.getContext('2d');
//retangulo verde da bandeira//
pincel.fillStyle='green';
pincel.fillRect(0, 0, 600, 400); // ponto inicial eixo x, ponto inicial eixo y, o "quanto preenche" no eixo x, o "quanto preenche" no eixo y//
//losango amarelo da bandeira - 1º triangulo//
pincel.fillStyle='yellow'; // definição da cor do preenchimento da figura//
pincel.beginPath(); //inicializando o caminho do pincel//
pincel.moveTo(300, 50); //coordenadas de destino do pincel, ou seja, por onde ele vai começar a desenhar//
pincel.lineTo(300, 350); //desenho da linha do pincel, ou seja, até onde fará o traçado da linha//
pincel.lineTo(50, 200); //desenho da linha do pincel, ou seja, até onde fará o traçado da linha//
pincel.lineTo(300, 50); //desenho da linha do pincel, ou seja, até onde fará o traçado da linha//
pincel.fill(); //função-comando para preenchimento da figura//
//losango amarelo da bandeira - 2º triangulo//
pincel.fillStyle='yellow'; // definição da cor do preenchimento da figura//
pincel.beginPath(); //inicializando o caminho do pincel//
pincel.moveTo(300, 50); //coordenadas de destino do pincel, ou seja, por onde ele vai começar a desenhar//
pincel.lineTo(300, 350); //desenho da linha do pincel, ou seja, até onde fará o traçado da linha//
pincel.lineTo(550, 200); //desenho da linha do pincel, ou seja, até onde fará o traçado da linha//
pincel.lineTo(300, 50); //desenho da linha do pincel, ou seja, até onde fará o traçado da linha//
pincel.fill(); //função-comando para preenchimento da figura//
//círculo azul da bandeira//
pincel.fillStyle="darkblue";// definição da cor do preenchimento da figura//
pincel.beginPath(); //inicializando o caminho do pincel//
pincel.arc(300, 200, 100, 0, 2*3.14);// ponto inicial eixo x, ponto inicial eixo y, valor do raio, ângulo inicial e final do circulo. Como queremos desenhar um circulo completo, os parâmetros são, respectivamente, 0 e 2 * PI cujo valor é 3.14//
pincel.fill();//função-comando para preenchimento da figura//
</script>
