Canvas play 2

by Anton

HTML

<canvas id="canvas" width=500 height=270></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const cx = canvas.getContext('2d');

const maxDepth = 5;
const baseSize = 250;

cx.strokeStyle = "#000000";

cx.translate(0, baseSize + 10);
triangle();

// --------------------------------------

function triangle(scale = 1, depth = 0) {
	if(depth > maxDepth) return;
    
    // Main
	cx.beginPath();
    const size = baseSize * scale;
    cx.moveTo(0, 0);
    cx.lineTo(size, -size);
    cx.lineTo(2 * size, 0);
    
    cx.closePath();
    cx.stroke();
    
    // Children
    cx.save(); // Transforms
    triangle(0.5 * scale, depth + 1);
    
    cx.translate(size, 0);
    triangle(0.5 * scale, depth + 1);
    
    cx.translate(-size/2, -size/2);
    triangle(0.5 * scale, depth + 1);
    cx.restore();
}