stack size

Level or recursion depending on amount of local variables

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="result1">Recursion levels via simple call: <span id="result1-data"></span></div>
<div id="result2">Recursion levels via fuction.call: <span id="result2-data"></span></div>
<canvas id="chart" width="400" height="400"></canvas>

CSS

#result1, #result2 {
    font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
#result1 {
    color: rgb(151, 187, 205);
}
#result2 {
    color: rgb(151, 205, 187);
}

JavaScript

var level = 0,
    useFunctionCall = false;

var recurse0 = function () {
    level++;
    useFunctionCall ? recurse0() : recurse0.call(this);
};

var levelFns = [
recurse0,

function recurse1(fn) {
    level++;
    useFunctionCall ? fn(fn) : fn.call(this, fn);
},

function recurse2(fn) {
    var a1 = 1;
    level++;
    useFunctionCall ? fn(fn) : fn.call(this, fn);
},

function recurse3(fn) {
    var a1 = 1,
        a2 = 2;
    level++;
    useFunctionCall ? fn(fn) : fn.call(this, fn);
},

function recurse4(fn) {
    var a1 = 1,
        a2 = 2,
        a3 = 3;
    level++;
    useFunctionCall ? fn(fn) : fn.call(this, fn);
}];

function getRecursionLevels(result, levels, labels) {
    result.innerHTML = '';
    for (var i = 0; i < levelFns.length; i++) {
        var fn = levelFns[i];
        try {
            level = 1;
            useFunctionCall ? fn(fn) : fn.call(this, fn);
        } catch (e) {
            result.innerHTML += ' ' + level;
            levels[i] = level;
            labels[i] = '' + i;
        }
    }
}

var result1 = document.getElementById('result1-data'),
    levels1 = [],
    labels1 = [];

var result2 = document.getElementById('result2-data'),
    levels2 = [],
    labels2 = [];

useFunctionCall = false;
getRecursionLevels(result1, levels1, labels1); // warm up
getRecursionLevels(result1, levels1, labels1);

useFunctionCall = true;
getRecursionLevels(result2, levels2, labels2); // warm up
getRecursionLevels(result2, levels2, labels2);

var data = {
    labels: labels1,
    datasets: [{
        //label: "dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: levels1
    }, {
        //label: "dataset",
        fillColor: "rgba(151,205,187,0.2)",
        strokeColor: "rgba(151,205,187,1)",
        pointColor:...