Adicionei a faixa branca no centro com o código do retângulo e adicionei uns comentários para fixação. :D

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

<script>

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

    // Bandeira
    pincel.fillStyle = "green";
    pincel.fillRect (0, 0, 600, 400);

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

    // Círculo
    pincel.fillStyle = "darkblue";
    pincel.beginPath();
    pincel.arc (300, 200, 100, 0, 2 * 3.14);
    pincel.fill();

    // Faixa
    pincel.fillStyle = 'white';
    pincel.fillRect (200, 190, 200, 15);

    /* Os primeiros dois parâmetros do método arc são as coordenadas X e Y do centro do circulo (no nosso caso, 300 e 200).
    O terceiro parâmetro é o valor do raio (no nosso caso, 100).
    O quarto e quinto parâmetros definem o â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). */

</script>