JSFiddle - React, Tailwind, and code Playground

CSS

canvas {
    border:1px black solid;       
}

JavaScript

// recursion 5 //  

var canvas = document.createElement('canvas'); 
canvas.width = 400; 
canvas.height = 400; 
document.body.appendChild(canvas); 

var ctx = canvas.getContext('2d'),
    generation = 0,
    branchLength = 60; 

ctx.translate(200, 360); 
branch(0);

function branch(angle) { 
    
    generation++; 
    
    ctx.save(); 
    
    ctx.rotate(angle);  
    ctx.scale(0.5,0.5);
    
    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.translate(0, -branchLength);
    ctx.lineTo(0, 0);
    ctx.stroke(); 
   
    if(generation<=3) {
    
        branch( 0.5);
        branch(-0.5);
    }
    
    ctx.restore();  
    
    generation--; 
    
}