Duda acerca de los parámetros del rectángulo

La bandera de puerto rico son cinco franjas verticales, El alto de tu canvas height="400" es de 400, por lo que cada franja será de de 80 de alto, 400/5=80, como son dos franjas blancas y tres rojas te recomiendo colocar el fondo base rojo. Con respecto a como se miden los rectángulos, pincel.fillRect(x0,y0, ancho, alto). (x0, y0) son las coordenadas del vértice superior izquierdo y ancho se mide a la derecha y alto se mide hacia abajo a partir de las coordenadas (x0, y0).

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

<script>

    var lienzo = document.querySelector("canvas");
    var pincel = lienzo.getContext("2d");

    //base roja de la bandera
    pincel.fillStyle = "red";
    pincel.fillRect(0,0,600,400);

    //   0 y 80 -------------------------------- franja 1, inicio   0 valor de y, ancho 80 (roja)
    //  80 y 80 -------------------------------- franja 2, inicio  80 valor de y, ancho 80 (blanca)
    // 160 y 80 -------------------------------- franja 1, inicio 160 valor de y, ancho 80 (roja)
    // 240 y 80 -------------------------------- franja 4, inicio 240 valor de y, ancho 80 (blanca)
    // 160 y 80 -------------------------------- franja 5, inicio 320 valor de y, ancho 80 (roja)

    // las rojas no se dibujan ya que son fondo

    // primera franja blanca (es la segunda franja, empieza en 80 el eje y)
    pincel.fillStyle = "white";
    pincel.fillRect(0,80,600,80);

    // segunda franja blanca (es la cuarta franja, empieza en 240 el eje y)
    pincel.fillStyle = "white";
    pincel.fillRect(0,240,600,80);


</script>

Ya para dibujar el triángulo y la estrella requiere de otros métodos pues no son rectángulos