<canvas width="600" height="400"> </canvas>
<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "green" // retangulo
    pincel.fillRect (100, 50, 600, 300)
    pincel.fillStyle = ("yellow"); //triangulo acima
    pincel.moveTo(550,  200 );
    pincel.lineTo(130, 200);
    pincel.lineTo(340, 80);
    pincel.fill();
    pincel.moveTo(340, 320 );//triangulo abaixo
    pincel.lineTo(550, 210);
    pincel.lineTo(130, 210);
    pincel.fill();
    pincel.fillStyle = ("darkblue");//circulo
    pincel.beginPath();
    pincel.arc(340, 200, 100, 0, 2*3.14);
    pincel.fill();
    pincel.fillStyle = "white" // 2º retangulo
    pincel.beginPath();
    pincel.fillRect (240, 190, 200, 30)
    pincel.fill();
    pincel.font='20px Calibri'; //texte
    pincel.fillStyle='darkgreen';
    pincel.fillText("Ordem E Progresso", 260, 210);
</script>