Edit in JSFiddle

var $loops = document.getElementById('loops');
var $draws = document.getElementById('draws');
var $updates = document.getElementById('updates');

window.engine = {
    running: true,
    paused: false,
    start: function () {
        engine.running = true;
        engine.loop(0);
    },
    stop: function () {
        $loops.innerHTML = 0;
        $draws.innerHTML = 0;
        $updates.innerHTML = 0;
    },
    loop: function (time) {
        $loops.innerHTML = parseInt($loops.innerHTML) + 1
        if (engine.paused === false) {
            engine.update(time);
        }
        engine.draw(time);
        if (engine.running === true) {
            window.requestAnimationFrame(function (time) {
                engine.loop(time);
            });
        } else {
            engine.stop();
        }
    },
    update: function (time) {
        $updates.innerHTML = parseInt($updates.innerHTML) + 1

    },
    quit: function () {
        engine.running = false
    },
    draw: function (time) {
        $draws.innerHTML = parseInt($draws.innerHTML) + 1
    },
    pause: function () {
        engine.paused = !engine.paused
    }
};
<button type="button" onclick="engine.start()">Start</button>
<button type="button" onclick="engine.quit()">Stop</button>
<button type="button" onclick="engine.pause()">Pause</button>
<br />loops: <span id="loops">0</span>
draws: <span id="draws">0</span>
updates: <span id="updates">0</span>