Оптимизация Canvas

[d1ver]

Доброго времени суток.

Есть некоторый код (выложен на codepen, т.к. в пост не влезал):

<p data-height="450" data-theme-id="light" data-slug-hash="aLaKWB" data-default-tab="js,result" data-user="IntroD1ver" data-embed-version="2" data-pen-title="aLaKWB" class="codepen">See the Pen <a href="https://codepen.io/IntroD1ver/pen/aLaKWB/">aLaKWB</a> by D1ver (<a href="https://codepen.io/IntroD1ver">@IntroD1ver</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

1) Как заставить canvas рисоваться на холст после того, как отработает функция draw (true) [389] ?

Вот проблемный кусок кода:

function draw(onScreen) {
	let endDraw = false;
	console.clear();
	let iterator = 0;
	let width = document.getElementById('canvasId').width;
	let height = document.getElementById('canvasId').height;
	while(!endDraw){
		var retval = drawPoly('canvasId', createCoordArray(createTree(document.getElementById('count').value)));
		if (!onScreen){
			endDraw = true;
		} else {
			if (retval == 0){
				endDraw = true;
				drawText("Iteration : " + iterator, {x: width - 1.8 * width / 10, y: height / 50 * 2 / 10});
			}
		}
		iterator++;
		if (iterator >= 200){
			endDraw = true;
			alert("Too much iteration for draw all nodes on you screen, please, try again!");
		}
	}
}

2) Как создать canvas с неограниченным размером, на него нарисовать дерево (drawPoly (), [320]) а потом отрисовывать фрагмент этого canvas с деревом на страницу?

3) Можно ли отрисовывать ноды в реальном времени? Каким путем идти для этого?


Буду благодарен за любую помощь...