<meta charset="utf-8">
<canvas width="300" height="200"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "green";
pincel.fillRect (0,0,300,210); //faz a parte verde. A proporção da bandeira é altura:14 módulos x largura:20 módulos. Art. 5º da Lei nº 5700/1971
pincel.fillStyle = "yellow";
pincel.beginPath();
pincel.moveTo(150, 25.5);
pincel.lineTo(25.5,100);
pincel.lineTo(275.5,100);
pincel.fill();
pincel.beginPath();
pincel.moveTo(150, 175.5);
pincel.lineTo(25.5, 100);
pincel.lineTo(275.5, 100);
pincel.fill(); //diz a lei que o losango deve ter seus vértices a uma distância de 1,7 módulos da borda verde
pincel.fillStyle = "darkblue";
pincel.beginPath();
pincel.arc(150, 100, 52.5, 0, 2 * 3.1416);
pincel.fill(); //diz a lei que o círculo azul deve ter raio de 3,5 módulos
</script>