canvas texture

texture.html

<canvas style="background: red;" width="600px" height="600px"></canvas>
<script>
  var cx = document.querySelector("canvas").getContext("2d");
  function branch(length, angle, scale) { 
    cx.fillRect(0, 0, 1, length);
    if (length < 10) return; 
    cx.save();
    cx.translate(0, length);
    cx.rotate(-angle);
    branch(length * scale, angle, scale);
    cx.rotate(2 * angle);
    branch(length * scale, angle, scale);
    cx.restore();
  }

  var lengths = ['0.88'];

  lengths.forEach(function(l) {  
    cx.translate(900, 0); 
    branch(40, 0.8, l);
  });
</script>