Vale ressaltar esta bandeira irá ser proporcional ao tamanho do width e height passado no canvas

<canvas width="800" height="400"/>
<script>
    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');
    let x=0, y=0, width=tela.width, height=tela.height;
    pincel.fillStyle='green';
    pincel.fillRect(x,y,width,height);

    function desenha_losango(x, y, largura, altura) {
        let x_mais_largura=x+largura;
        let y_mais_altura=y+altura;
        let x_metade_largura=x_mais_largura/2;
        let y_metade_altura=y_mais_altura/2;
        pincel.beginPath();
        pincel.moveTo(x, y_metade_altura);
        pincel.lineTo(x_metade_largura,y);
        pincel.lineTo(x_mais_largura, y_metade_altura);
        pincel.lineTo(x_metade_largura, y_mais_altura);
        pincel.fill();
    }

    function desenha_circulo(x, y, largura, altura, tamanho) {
        pincel.beginPath();
        pincel.arc((x+largura)/2,(y+altura)/2,tamanho,0,2*Math.PI);
        pincel.fill();
    }

    pincel.fillStyle='yellow';
    desenha_losango(x+20, y+20, width-40, height-40);

    pincel.fillStyle='blue';
    desenha_circulo(x,y,width,height,height/3.5);
</script>