Necesito crear un triángulo que se llame triángulo duval. Se parece a esto:

Necesito hacerlo con lienzo. Hasta ahora he logrado crear un triángulo. Pero no sé cómo colorearlo y cómo dividir el área dentro del triángulo en diferentes colores como en la imagen. ¿Puedo hacer algo así en el lienzo? ¿Es posible crear un triángulo duval en el lienzo? Cualquier ayuda es bendecida :). El código hasta ahora:

var triangle = document.getElementById("triangle");
var ctx = triangle.getContext("2d");
var cw = triangle.width = 500;
var ch = triangle.height = 500;

function createIntervalA(){
  ctx.beginPath();
   ctx.moveTo(250,0);
  ctx.lineTo(0,250);
  ctx.strokeStyle = '#fff';
  ctx.stroke();
  
}

createIntervalA();

function CreateIntervalB() {
  ctx.beginPath();
  ctx.moveTo(0,250);
  ctx.lineTo(500,250);
  ctx.strokeStyle = '#fff';
  ctx.stroke();
}
CreateIntervalB();

function CreateIntervalC() {
  ctx.beginPath();
  ctx.moveTo(250,0);
  ctx.lineTo(500,250);
  ctx.strokeStyle = '#fff';
  ctx.stroke();
}
CreateIntervalC();

body {
  margin: 0;
  background: #eee;
  font-family: Courier, monospace;
  font-size: 16px;
  background-color: #000;
}

#triangle {
  display: block;
}

<canvas id="triangle"></canvas>