Как нарисовать дерево на Canvas?

1
2
3
4
5

<canvas id="canvas"></canvas>
<script>
   let canvas = document.getElementById("canvas");
   let ctx = canvas.getContext("2d");
</script>

1
2
3
4
5

ctx.beginPath();
ctx.moveTo(150,200);
ctx.lineTo(150,150);
ctx.lineWidth = 30;
ctx.stroke();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

ctx.beginPath();
ctx.moveTo(150,150);
ctx.lineTo(100,100);
ctx.lineWidth = 20;
ctx.stroke();

ctx.beginPath();
ctx.moveTo(150,150);
ctx.lineTo(200,100);
ctx.lineWidth = 20;
ctx.stroke();

1
2
3
4
5
6
7
8
9

ctx.beginPath();
ctx.arc(100, 90, 30, 0, Math.PI*2);
ctx.fillStyle = "green";
ctx.fill();

ctx.beginPath();
ctx.arc(200, 90, 30, 0, Math.PI*2);
ctx.fillStyle = "green";
ctx.fill();