JSFiddle - React, Tailwind, and code Playground

by atner

HTML

<!DOCTYPE html>

  <title>My canvas recursive tree</title>
  
  <script> 
   window.onload = function() {
    var drawingCanvas = document.getElementById('mycnv');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
	 

		radius = 300;

		// вызываем рисование солнышка
		//drawSun(context);
				
		x = 200;
		y = 300;
		angle = 180;
		
		//кружок возле центра
		for (z=1;z<360;z=z+15) {
		drawTo2(context,2,z);
		};
		context.stroke();
		
		//диаграмма
		drawCircle(context);
		
		//попытка нарисовать дерево
		drawTree(context, 9,2);

		var img2=new Image();
		img2.src='img/1.png';
		context.drawImage(img2, Math.random(1)*400+50, Math.random(1)*200+50,100,100);

		context.stroke();
		context.fill();
			
	 } else {
	
	}
   }

    // функциЯ расчета координат по длине и углу от заданных X,Y;
	function drawTo(context, length, angle) {
		angle = angle + 90;
		x1 = x + (Math.sin(angle*Math.PI/180)*length); 
		y1 = y + (Math.cos(angle*Math.PI/180) *length); 
		context.moveTo(x,y);
		context.lineTo(x1,y1);
	}

	// функциЯ расчета координат по длине и углу от заданных X,Y с возвращением новой координаты
	function drawTo2(context, length, angle) {
		//angle = angle + 90;
		x1 = x + (Math.sin(angle*Math.PI/180)*length); 
		y1 = y + (Math.cos(angle*Math.PI/180) *length); 
		context.moveTo(x,y);
		context.lineTo(x1,y1);
		x = x1;
		y = y1;
	}
	
	// рисование солнышка
	function drawSun(context) {
		context.strokeStyle = '#D70A02';
			for (q=0; q<360; q=q+2) {
				drawTo(context,300,q);
			};
		};
	// рисование диаграммы
	function drawCircle (context) {
		for(var i=0;i<6;i++){
		context.fillStyle = 'rgb(' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) +')';
		context.beginPath();
		context.arc(300,100,70,Math.PI/3*i,Math.PI/3*(i+1),false);
		context.lineTo(300,100);
		context.fill();
		};
	};
	
	//рекурсивная функция
	function myCtx (num) {
		if (num>0)...