canvas/tree.js

const balance_angle = angle => angle * (Math.PI / 180)

const stem = (ctx, x1, y1, length, angle) => {
	// Визначити координати кіня стовбура знаючи почткову точку стовбура, його довжину та кут нахилу. Так, це тригонометрія в дії :)
    const balanced_angle = balance_angle(angle)
	let x2 = x1 + length * Math.sin(balanced_angle);
	let y2 = y1 - length * Math.cos(balanced_angle);
	
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.lineWidth=length/10; // тощина стовбура залежить від його довжини
	ctx.stroke();
	ctx.closePath();

	// Закоментуй цей IF. Що змінилось в картинці дерева? Чому стало гірше?
	if (length > 20) {
		x2 = x1 + (length * 0.95) * Math.sin(balanced_angle);
		y2 = y1 - (length * 0.95) * Math.cos(balanced_angle);
	}

    if (length > 1) {
		const rnd1 = Math.random() *20  -10;  // [-10.0 .. +10.0]
		const rnd2 = Math.random() *0.2 +0.6; // [  0.6 ..   0.8]

		// Малюємо розгалудження стовбура. За початок нового стовбура використовується кінець поточного стовбура
      	stem(ctx, x2, y2, length * rnd2, angle + 35 +rnd1);
      	stem(ctx, x2, y2, length * rnd2, angle - 25 +rnd1);
	}
}

const tree = (ctx, x, y, height) => stem(ctx, x, y, height, 0);