h1 Fractal Tree
canvas#my_canvas(width="1000", height="600")
View Compiled
h1 { font-family: sans-serif; }
#my_canvas { background-color: #efefef; }
// Based on https://dev.to/lautarolobo/use-javascript-and-html5-to-code-a-fractal-tree-2n69
var myCanvas = document.getElementById("my_canvas");
var ctx = myCanvas.getContext("2d");
function draw(startX, startY, len, angle) {
  ctx.beginPath();
  ctx.save();
  ctx.translate(startX, startY);
  ctx.rotate(angle * Math.PI/180);
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -len);
  ctx.stroke();
  if (len < 10) {
    ctx.restore();
    return;
  }
  draw(0, -len, len*0.8, -15);
  draw(0, -len, len*0.8, +15);
  ctx.restore();
}

draw(400, 600, 120, 0);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.