rajasharan/app.js

## app.js
$(function() {
    console.log('now running');

    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var h = 150;
    var w = 300;
    var start = 0.0;

    var radius = 0;
    var total_elapsed = 0.0;
    var TIME_LENGTH = 500;
    var OVERFLOW = w/15;
    var AVG_TIME_FRAME = 1000 / 40;

    function clearRect() {
        ctx.clearRect(0,0,w,h);
    }

    function drawBorder() {
        ctx.strokeRect(0,0,w,h);
    }

    function drawCircle(radius) {
        ctx.clearRect(0, 0, w, h);
        drawBorder();
        ctx.beginPath();
        ctx.arc(w/2, h/2, radius, 0, Math.PI*2, true);
        ctx.stroke();
    }

    function step(t) {
        if (!t) {
            requestAnimationFrame(step);
        } else {
            var frame_diff = t - start;
            total_elapsed += frame_diff;
            start = t;
                       console.log(frame_diff);
            if (frame_diff > AVG_TIME_FRAME) {
                total_elapsed -= frame_diff;
                requestAnimationFrame(step);
                return;
            }

            radius = total_elapsed/TIME_LENGTH * (w/2) + OVERFLOW;
            drawCircle(radius);

            if (total_elapsed >= TIME_LENGTH) {
                total_elapsed = 0.0;
                radius = 0;
            } else {
                requestAnimationFrame(step);
            }
        }
    }
    drawBorder();
    canvas.addEventListener('click', canvas_click, false);

    function canvas_click() {
        reset_fps();
        step();
    }
});

var start;
$(function() {
    window.p = document.querySelector('#test');
    reset_fps();
    fps_test();
});
function fps_test(t) {
    if (!t) {
        requestAnimationFrame(fps_test);
        return;
    }
    var diff;
    var fps;
    if (start) {
              diff = t - start;
        fps = Math.round(1000 / diff);
        if (fps <= window.FPS) {
            window.FPS = fps;
            window.p.textContent = ''+fps+' FPS';
        }
    }
    start = t;
    requestAnimationFrame(fps_test);
}

function reset_fps() {
    window.FPS = 66;
}

## index.html
<html>
    <head>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <p id="test"></p>
    </body>
</html>
	$(function() {
	console.log('now running');

	var canvas = document.querySelector('#canvas');
	var ctx = canvas.getContext('2d');
	var h = 150;
	var w = 300;
	var start = 0.0;

	var radius = 0;
	var total_elapsed = 0.0;
	var TIME_LENGTH = 500;
	var OVERFLOW = w/15;
	var AVG_TIME_FRAME = 1000 / 40;

	function clearRect() {
	ctx.clearRect(0,0,w,h);
	}

	function drawBorder() {
	ctx.strokeRect(0,0,w,h);
	}

	function drawCircle(radius) {
	ctx.clearRect(0, 0, w, h);
	drawBorder();
	ctx.beginPath();
	ctx.arc(w/2, h/2, radius, 0, Math.PI*2, true);
	ctx.stroke();
	}

	function step(t) {
	if (!t) {
	requestAnimationFrame(step);
	} else {
	var frame_diff = t - start;
	total_elapsed += frame_diff;
	start = t;
	console.log(frame_diff);
	if (frame_diff > AVG_TIME_FRAME) {
	total_elapsed -= frame_diff;
	requestAnimationFrame(step);
	return;
	}

	radius = total_elapsed/TIME_LENGTH * (w/2) + OVERFLOW;
	drawCircle(radius);

	if (total_elapsed >= TIME_LENGTH) {
	total_elapsed = 0.0;
	radius = 0;
	} else {
	requestAnimationFrame(step);
	}
	}
	}
	drawBorder();
	canvas.addEventListener('click', canvas_click, false);

	function canvas_click() {
	reset_fps();
	step();
	}
	});

	var start;
	$(function() {
	window.p = document.querySelector('#test');
	reset_fps();
	fps_test();
	});
	function fps_test(t) {
	if (!t) {
	requestAnimationFrame(fps_test);
	return;
	}
	var diff;
	var fps;
	if (start) {
	diff = t - start;
	fps = Math.round(1000 / diff);
	if (fps <= window.FPS) {
	window.FPS = fps;
	window.p.textContent = ''+fps+' FPS';
	}
	}
	start = t;
	requestAnimationFrame(fps_test);
	}

	function reset_fps() {
	window.FPS = 66;
	}
	<html>
	<head>
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="app.js"></script>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<p id="test"></p>
	</body>
	</html>