console
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;
}