Canvas play 2

by Anton

HTML

<canvas width="400" height="400" />

CSS

canvas {
    border: solid 1px darkgrey;
}

JavaScript

const cv = document.querySelector("canvas");
const cx = cv.getContext("2d");

const length = 60;
const maxDepth = 8;
const scaleFactor = 0.8;

cx.translate(200, 400);
cx.rotate(Math.PI);

branch(1, 0, 0);

return;

// ----------------------------------------
function branch(scale, angle, depth) {
	if(depth > maxDepth) return;
    
	cx.save(); // transforms
    cx.rotate(angle);
	cx.fillRect(0, 0, 1, length * scale);
    
    cx.translate(0, length * scale);
    branch(scale * scaleFactor, - Math.PI / 6, depth + 1);
    branch(scale * scaleFactor, Math.PI / 6, depth + 1);
    
    cx.restore(); // transforms
}