solucao

<canvas width = "600" height = "400"> </canvas>
<script>
    var tela = document.querySelector("canvas");
    var pincel =tela.getContext("2d");
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = "green";
    pincel.fillRect(100, 50, 400, 300);// make the big green retangle

    pincel.fillStyle = "yellow";
    pincel.beginPath();
    pincel.moveTo(300,50);
    pincel.lineTo(100,200); // make the up yellow triangle
    pincel.lineTo(500,200);
    pincel.fill();
    pincel.beginPath();
    pincel.moveTo(100,200);
    pincel.lineTo(300,350); // make the lower yellow triangle
    pincel.lineTo(500,200);
    pincel.fill();


    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2*3.14); // make the blue circle
    pincel.fill();

</script>