Bandera personalizada

<meta charset="utf-8">

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

</canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    //pincel.fillStyle = "lightgrey" //Propiedad
    //pincel.fillRect(0,0,600,400) //Funcion
    pincel.fillStyle = "yellow"; //Propiedad
    pincel.fillRect(0,0,600,200);

    pincel.fillStyle = "blue"; //Propiedad
    pincel.fillRect(0,200,600,100);

    pincel.fillStyle = "red"; //Propiedad
    pincel.fillRect(0,300,600,100);

    pincel.fillStyle= "yellow";
    pincel.beginPath()
    pincel.moveTo(300,210);
    pincel.lineTo(350,290);
    pincel.lineTo(250,290);
    pincel.fill();

    pincel.fillStyle = "red";
    pincel.beginPath();
    pincel.arc(300,210,30,0,2*3.14);
    pincel.fill();
</script>