Ich muss ein Dreieck erstellen, das als duval-Dreieck bezeichnet wird. Es sieht aus wie das:

Ich muss es mit Leinwand machen. Bisher ist es mir gelungen, ein Dreieck zu erstellen. Aber ich weiß nicht, wie ich es einfärben soll und wie ich den Bereich innerhalb des Dreiecks in verschiedene Farben wie auf dem Bild aufteilen soll. Kann ich so etwas in Canvas machen, ist es möglich, Duval-Dreiecke in Canvas zu erstellen. Jede Hilfe ist gesegnet :). Der Code bisher:

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>