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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.