Как создать Duval Triangle на холсте

Мне нужно создать треугольник, который называется двойным треугольником. Это выглядит так:

Мне нужно сделать это с помощью canvas. пока мне удается создать треугольник. Но я не знаю, как его раскрасить и как разделить область внутри треугольника на разные цвета, как на картинке. Могу ли я сделать такую ​​вещь на холсте, можно ли создать duval треугольник на холсте. Любая помощь благословлена ​​:). Код до сих пор:

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>