[Duda] Haz lo que hicimos en el aula

Ando un poco perdido, ¿Como le hago para que el triangulo rojo se repita pero desde la parte de arriba, de igual manera los triangulos azules para que complementen la seccion blanca con diseño mejor?

me confundi con eso de las coordenadas

¿Alguien me lo puede explicar?

<meta charset="UTF-8">

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


<script>

    var screen = document.querySelector ("canvas");

    var pencil = screen.getContext("2d");

        pencil.fillStyle = "white";
        pencil.fillRect (0,0,600,400);

        pencil.fillStyle = "darkgreen";
        pencil.fillRect (0,0,200,400);

        pencil.fillStyle = "red";
        pencil.fillRect (400,0,200,400);

            pencil.fillStyle = "red";
                pencil.beginPath ();
                pencil.moveTo (300,200);
                pencil.lineTo (200,400);
                pencil.lineTo (400,400);
                pencil.fill ();


                pencil.fillStyle = "darkblue";
                pencil.beginPath ();
                pencil.moveTo (300,400);
                pencil.lineTo (400,200);
                pencil.lineTo (400,400);
                pencil.fill ();


                pencil.fillStyle = "darkblue";
                pencil.beginPath ();
                pencil.moveTo (300,400);
                pencil.lineTo (200,200);
                pencil.lineTo (200,400);
                pencil.fill ();


            pencil.fillStyle = "yellow";
                pencil.beginPath ();
                pencil.arc (300,175,50,0,2*3.14);
                pencil.fill ();



</script>