rozag/index.html

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>SimpleFractal</title>
</head>

<body>
<canvas width="900" height="600"></canvas>
</body>

<script src="main.js"></script>

</html>

## main.js
"use strict";

var context = document.querySelector("canvas").getContext("2d");

function branch(length, angle, scale) {
    context.fillRect(0, 0, 1, length); // Рисуем "ствол-корень" дерева

    var MIN_LENGTH = 8;
    if (length < MIN_LENGTH) // Обрываем рекурсию, когда линии становятся слишком короткими
        return;

    context.save(); // Сохраняем текущее состояние системы координат

    context.translate(0, length); // Сдвигаем "курсор" в конец "ствола-корня"
    context.rotate(-angle); // Поворачиваем систему координат на какой-то угол влево
    branch(length * scale, angle, scale); // Рекурсивно рисуем левую ветвь

    context.rotate(2 * angle); // Поворачиваем систему координат на симметричный угол вправо
    branch(length * scale, angle, scale); // Рекурсивно рисуем правую ветвь

    context.restore(); // Восстанавливаем начальное состояние системы координат
}

context.translate(document.querySelector("canvas").clientWidth / 2, 0); // Начальный сдвиг системы координат,
                                                                        // чтобы центрировать дерево
branch(90, 0.5, 0.75);
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>SimpleFractal</title>
	</head>

	<body>
	<canvas width="900" height="600"></canvas>
	</body>

	<script src="main.js"></script>

	</html>
	"use strict";

	var context = document.querySelector("canvas").getContext("2d");

	function branch(length, angle, scale) {
	context.fillRect(0, 0, 1, length); // Рисуем "ствол-корень" дерева

	var MIN_LENGTH = 8;
	if (length < MIN_LENGTH) // Обрываем рекурсию, когда линии становятся слишком короткими
	return;

	context.save(); // Сохраняем текущее состояние системы координат

	context.translate(0, length); // Сдвигаем "курсор" в конец "ствола-корня"
	context.rotate(-angle); // Поворачиваем систему координат на какой-то угол влево
	branch(length * scale, angle, scale); // Рекурсивно рисуем левую ветвь

	context.rotate(2 * angle); // Поворачиваем систему координат на симметричный угол вправо
	branch(length * scale, angle, scale); // Рекурсивно рисуем правую ветвь

	context.restore(); // Восстанавливаем начальное состояние системы координат
	}

	context.translate(document.querySelector("canvas").clientWidth / 2, 0); // Начальный сдвиг системы координат,
	// чтобы центрировать дерево
	branch(90, 0.5, 0.75);