Edit in JSRun

var ctx=document.getElementById('canvas').getContext('2d');
var colorList=['#FF3534','#ffff00','#1584CC'],i=0;
function triangle(p1,p2,p3){
  ctx.moveTo(p1.x,p1.y);
  ctx.lineTo(p2.x,p2.y);
  ctx.lineTo(p3.x,p3.y);
  ctx.lineTo(p1.x,p1.y);
}
function Striangle(p,len){
  var r=len/Math.sqrt(3);
  var p1={x:p.x,y:p.y-r};
  var p2={x:p.x-len/2,y:p.y+r/2};
  var p3={x:p2.x+len,y:p2.y};
  ctx.beginPath();
  triangle(p1,p2,p3);
  ctx.closePath();
  ctx.strokeStyle='ff0000';
  ctx.stroke();
  middleTriangle(p1,p2,p3);
}
function middleTriangle(p1,p2,p3){
  var mp3={x:(p1.x+p2.x)/2,y:(p1.y+p2.y)/2};
  var mp1={x:(p3.x+p2.x)/2,y:(p3.y+p2.y)/2};
  var mp2={x:(p1.x+p3.x)/2,y:(p1.y+p3.y)/2};
  ctx.beginPath();
  triangle(mp1,mp2,mp3);
  ctx.closePath();
  ctx.lineWidth=0.5;
 ctx.fillStyle=colorList[(i++)%3];
  ctx.fill();
  if((mp1.x-mp2.x)*(mp1.x-mp2.x)+(mp1.y-mp2.y)*(mp1.y-mp2.y)>100){
    setTimeout(function(){
    middleTriangle(p1,mp2,mp3);
    middleTriangle(p2,mp1,mp3);
    middleTriangle(p3,mp2,mp1);},1000);
  }
}
Striangle({x:300,y:400},560);
<canvas id='canvas' width='600' height='600'></canvas>
canvas{
  border:1px solid black;
}