Canvas HTML - jak narysować drugi obrazek, bez nakładania pętli z pierwszego obrazka?

pytanie zadane 8 stycznia 2018 w JavaScript przez Danielnic Nowicjusz (210 p.)
otagowane ponownie 8 stycznia 2018 przez Danielnic

Witam.
Wiele rożnych sposobów próbowałem aby narysować drugi obrazek bez nakładania petli z pierwszego jednak nic mi się nie udaje. Więc przychodzę spytaniem, co muszę zrobić aby ten drugi obrazek nie brał tej petli z pierwszego?
Proszę o pomoc, dziękuje pozdrawiam.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script type="text/javascript">
function draw(startX, startY, len, angle, branchWidth) {
var canvas = document.getElementById('canvas');
  
  if (canvas.getContext)
  {

    var ctx = canvas.getContext('2d');
  

ctx.beginPath();
  ctx.save();
  
  ctx.translate(startX, startY);
  ctx.rotate(angle * Math.PI/180);
  ctx.moveTo(0, 0);
  ctx.lineTo(5, -len);
  ctx.strokeStyle = "darkgreen";
	ctx.fillStyle = "green";
	ctx.lineWidth = branchWidth;
  ctx.stroke();
  
  if(len <8) {
    ctx.restore();
    return;
  }
  
  draw(0, -len, len*0.8, -8, branchWidth*0.8);
  draw(0, -len, len*0.8, 8, branchWidth*0.8);
  
  
  ctx.restore();

 ctx.beginPath();
ctx.rotate(Math.PI / 30);
ctx.rect(30, 20, 250, 150);
ctx.fillStyle="gray";
ctx.fill();
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.stroke();
 
}
}


</script>


</head>
<body onload="draw(350,0,120,180);">
<canvas id="canvas" width="2000" height="1170" ></canvas>

</body>
</html>