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

Essa foi minha solução para o exercicio da bandeira

!<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bandeira do Brasil</title>
</head>
<body>

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

    <script>

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 600, 400);



    pincel.fillStyle = 'yellow'
    pincel.beginPath ();
    pincel.moveTo(50, 200);
    pincel.lineTo(300, 50)
    pincel.lineTo(550, 200)
    pincel.fill();

    pincel.fillStyle = 'yellow'
    pincel.beginPath ();
    pincel.moveTo(550, 200);
    pincel.lineTo(50, 200)
    pincel.lineTo(300, 350)
    pincel.fill();

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




    </script>
</body>
</html>