Stats.js frame drop

by navinleon

HTML

<script src="https://github.com/mrdoob/stats.js/raw/master/src/Stats.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/stats.js/master/src/Stats.js"></script>

JavaScript

// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( /* function */ callback, /* DOMElement */ element) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

var canvas, context, stats, fpsMode;

init();
animate();

function init() {
    stats = new Stats();
    stats.setMode(0); // 0: fps, 1: ms    
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '10px';
    stats.domElement.style.top = '10px';
    document.body.appendChild(stats.domElement);
    fpsMode = false;
    window.setInterval(function () {
        stats.setMode(fpsMode ? 1 : 0);
        fpsMode = !fpsMode;
    }, 5000);
    canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 256;

    context = canvas.getContext('2d');

    document.body.appendChild(canvas);

}

function animate() {
    stats.update();
    requestAnimFrame(animate);
    draw();

}

function draw() {

    var time = new Date().getTime() * 0.002;
    var x = Math.sin(time) * 96 + 128;
    var y = Math.cos(time * 0.9) * 96 + 128;

    context.fillStyle = 'rgb(245,245,245)';
    context.fillRect(0, 0, 255, 255);

    context.fillStyle = 'rgb(255,0,0)';
    context.beginPath();
    context.arc(x, y, 10, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();

}