Siendo creativos con la bandera

algo diferente

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


<script>
    var pantalla =  document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgray"; // propiedad
    pincel.fillRect( 0,0,600,400); // Funcion

    pincel.fillStyle = "green"; // propiedad
    pincel.fillRect( 0,0,200,400); // Funcion

    pincel.fillStyle = "red"; // propiedad
    pincel.fillRect( 400,0,200,400); // Funcion

    pincel.fillStyle = "yellow"; // propiedad
    pincel.beginPath(); // Funcion
    pincel.moveTo(400,200);
    pincel.lineTo(300,400);
    pincel.lineTo(200,400);
    pincel.fill();


    pincel.fillStyle = "blue" ;
    pincel.beginPath();
    pincel.arc(300,200,50,0,2*3.14);
    pincel.fill();