JSFiddle - React, Tailwind, and code Playground

canvas - recursive

by hronic

HTML

<canvas id="canvas" width="400" height="400"></canvas>

CSS

#canvas {
  border: 1px dashed black;
}

JavaScript

var canvas = document.getElementById('canvas');
var c = canvas.getContext("2d");

var angle = 0.35;
var branchScale = 0.7;
var l = 50;
var minL = 5;
var w = c.canvas.width;
var h = c.canvas.height;

function drawTree(l, direction) {
  c.save();
  c.rotate(angle * direction);
  c.fillRect(-l / 20, 0, l / 10, -l);
  if (l > minL) {
    c.translate(0, -l);
    drawTree(l * branchScale, -1);
    drawTree(l * branchScale, 1);
  }
  c.restore();
}
// green tree
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 = "green";
    c.fillRect(-2, -2, 4, 4);
  }
  c.restore();
}
c.translate(w/1.5, h);
drawBranch(50, 1);

c.translate(-150, 0);
drawTree(l, 0);