Edit in JSFiddle

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

var totalLineLength = 1;
var currentLineWidth = 2;
var maxLineWidth = 10;
var baseX = 0;
var baseY = 0;
var trunkLength = 0;
var stopGrowing = false;

window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    baseX = canvas.width / 2;
    baseY = canvas.height;
    trunkLength = canvas.height / 5;
    paintFractalTree(baseX, baseY, Math.PI / 2, currentLineWidth, trunkLength, totalLineLength, [79,49,0], [0,150,0], 1);
}

resizeCanvas();

window.setInterval(function() {
    if(stopGrowing) return;
    totalLineLength++;
    currentLineWidth = Math.min(currentLineWidth * 1.005, maxLineWidth);
    resizeCanvas();
}, Math.round(1000 / 60));

function paintFractalTree(x, y, direction, lineWidth, lineLength, runningTotalLineLength, startColor, endColor, colorLerp) {
    if(lineWidth < 1) {
        stopGrowing = true;
        return;
    }
    context.beginPath();
    var color = [];
    for(var i = 0; i < 3; i++) {
        color.push(endColor[i] - Math.round((endColor[i] - startColor[i]) * colorLerp));
    }
    context.strokeStyle = rgbToHex(color);
    context.lineWidth = lineWidth;
    context.moveTo(x, y);
    var thisLineLength = Math.min(lineLength, runningTotalLineLength);
    var newX = Math.cos(direction) * thisLineLength + x;
    var newY = -Math.sin(direction) * thisLineLength + y;
    runningTotalLineLength -= thisLineLength;
    context.lineTo(newX, newY);
    context.stroke();
    
    if(runningTotalLineLength == 0) {
        return;
    }
    
    var actions = [];
    
    var newColorLerp = colorLerp * 0.96;
    
    var leftDirection = direction - Math.PI / 6;
    var leftLineWidth = lineWidth * .85;
    var leftLineLength = lineLength * 0.8;
    
    actions.push(function() {
        paintFractalTree(newX, newY, leftDirection, leftLineWidth, leftLineLength, runningTotalLineLength, startColor, endColor, newColorLerp);
    });
    
    var rightDirection = direction + Math.PI / 6;
    var rightLineWidth = lineWidth * .85;
    var rightLineLength = lineLength * 0.8;
    
    actions.push(function() {
        paintFractalTree(newX, newY, rightDirection, rightLineWidth, rightLineLength, runningTotalLineLength, startColor, endColor, newColorLerp);
    });
    
    if(Math.random() < 0.5) {
        actions[0]();
        actions[1]();
    } else {
        actions[1]();
        actions[0]();
    }
}

function rgbToHex(rgb) {
    var hex = '#';
    for(var i = 0; i < 3; i++) {
        var part = rgb[i].toString(16);
        if(part.length == 1) {
            part = '0' + part;
        }
        hex += part;
    }
    return hex;
}

<div>
    <b>Fractal Tree</b>
</div>
<canvas id="canvas"></canvas>

* { margin:0; padding:0; }

html, body { width:100%; height:100%; }

canvas { display:block; }

div {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: helvetica;
}