JSFiddle - React, Tailwind, and code Playground

by sebleedelisle

CSS

canvas {
    border:1px black solid;       
}

JavaScript

// recursion 3 //  

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

var ctx = canvas.getContext('2d'),
    counter = 0; 

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

function branch(branchLength) { 
    counter++; 
    
    ctx.rotate(Math.random() - 0.5); 
    ctx.scale(0.8, 0.8); 
    
    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(0, -branchLength);
    ctx.stroke(); 
   
    ctx.translate(0, -branchLength);
    
    if(counter<=10) branch(branchLength);
     
}