var a = document.getElementById("myCanvas");
var c = a.getContext("2d");

function drawBranch(l, direction) {
  c.save();
  c.fillRect(-1, 0, 2, -l);
  c.translate(0, -l);
  if (l > 5) {
    drawBranch(l * 0.8, -direction);
    c.rotate(0.5 * direction);
    drawBranch(l * 0.7, -direction);
  } else {
    c.fillStyle = "#1e8214";
    c.fillRect(-2, -2, 4, 4);
  }
  c.restore();
}

c.translate(300, 450);
drawBranch(50, 1);