Hola, subo lo que hice. Lo personalice a mi manera para dibujar la bandera de mi país :)

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

<script>
    function dibujarFranja(x, y, ancho, alto ,color){
        pincel.fillStyle = color; 
        pincel.fillRect(x, y, ancho, alto); 
    }

    function dibujarCirculo(x, y, tamaño, color){
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, tamaño, 0, 2 * Math.PI); //x, y, tamaño, ángulo inicial, ángulo final
        pincel.fill();
    }
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    dibujarFranja(0, 0, 600, 133, "lightblue");
    dibujarFranja(0, 266, 600, 133, "lightblue");
    dibujarCirculo(300, 200, 50, "yellow");

</script>

Resultado: