Bandeira Brasil

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d'); //dimensão do pincel

    //criar retangulo cinza
    pincel.fillStyle = 'lightgreen'; 
    pincel.fillRect(0, 0, 600, 400); //(X, Y, width, height)

    //criar retangulo verde 200, 400
    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 200, 400);

    //criar retangulo vermelho de 200 largura, 400 altura
    pincel.fillStyle = 'darkgreen';
    pincel.fillRect( 400, 0, 200, 400);

    //triangulo
    pincel.fillStyle = 'yellow';
    pincel.beginPath();//começa caminho
    pincel.moveTo(300, 0); //(X, Y)
    pincel.lineTo(0, 200);
    pincel.lineTo(300, 400);
    pincel.lineTo(600, 200);
    pincel.fill(); 

//circulo
    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(300, 200, 110, 0, 2 * 3.14);
    pincel.fill();

    //pequenos circulos
    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.arc(184, 230, 5, 0, 2 * 3.14); 
    pincel.arc(185, 200, 5, 0, 2 * 3.14); 
    pincel.arc(410, 200, 5, 0, 2 * 3.14); 
    pincel.arc(405, 230, 5, 0, 2 * 3.14); 
    pincel.fill();

</script>