example/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GameStats example</title>
	<script src="../build/gamestats.js"></script>
	<style>
		html, body, canvas{
			width:100%;
			height:100%;
			margin: 0;
			padding:0;
			color:white;
		}

		html{
			background:#000;
		}

		div[data="gamestats"], button{
			transform:translate(-50%, -50%);
			filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
		}

		a {
			position:absolute;
			bottom:0px;
			right:0px;
			margin:10px;
			font-size: 12px;
			color:inherit;
		}
		button{
			position:absolute;
			border-width: 0;
			border-style: solid;
			background: transparent;
			border-radius: 0.27em;
			cursor: pointer;
			user-select: none;
			vertical-align: bottom;
			box-shadow: 0 3px 0 0 #1e1f26, 0 4px 4px -1px rgb(0 0 0 / 60%), 0 4px 6px 1px rgb(0 0 0 / 30%), 0 1px 2px 1px rgb(0 0 0 / 0%) inset, 0 18px 32px -2px rgb(255 255 255 / 10%) inset;
			background-color: #3F4351;
			background-image: linear-gradient(-45deg, #3F4351, #384758);
			top:50%;
			left:50%;
			padding: 10px 20px;
			color:inherit;
			margin-top:120px;
		}

	</style>
</head>
<body>
	<canvas id=c></canvas>
	<script>
		var fps, fpsInterval, startTime, now, then, elapsed;
		var memory = [];
		var stats = new GameStats();
		stats.dom.style.top = '50%';
		stats.dom.style.left = '50%';

		var ctx = c.getContext('2d', { willReadFrequently: true });

		function startAnimating(fps) {
			fpsInterval = 1000 / fps;
			then = Date.now();
			startTime = then;
			animate();
		}

		function animate() {
			requestAnimationFrame(animate);

			now = Date.now();
			elapsed = now - then;

			if (elapsed > fpsInterval) {
				then = now - (elapsed % fpsInterval);
				update();
			}
		}

		function update() {
			// we begin to measure the frame time
			stats.begin();

			// we measure the star render time
			stats.begin('stars123');
			drawStars();
			stats.end('stars123');

			// we do some heavy computing
			stats.begin('heavy-computing-1', '#6cc644')	// optional second color parameter, if none is given a deterministic color will be chosen based on the label
			compute();
			stats.end('heavy-computing-1')

			// we do some more heavy computing
			stats.begin('heavy-computing-2')
			compute(2);
			stats.end('heavy-computing-2')

			increaseMemory();

			// we end measuring the frame time
			stats.end();
		}
		var computeN = 100000;
		function compute(q=1){
			var i = 0;
			// this is here to fake some heavy computing
			while(i<computeN*q){
				i++;
				var a = Math.sqrt(Math.sin(a)*Math.cos(a));
			}
		}

		function drawStars(){
			// https://www.dwitter.net/d/21608 by DataMeta
			var t = performance.now()/5000;
			var T = Math.tan, S = Math.sin;
			c.width = window.innerWidth;
			c.height = window.innerHeight;
			c.style.filter=`invert(`;
			with(ctx)for(c.width|=i=384;i--;)a=192/(i*3),ctx.fillRect(1920*(T(i)+a*t)%3e3,540+540*S(a*2e3),a*6<12?d=a*6:d=0,d);
		}

		function lag(){
			computeN += 100000;
		}

		function increaseMemory(){
			if(window.performance && window.performance.memory){
				// cap at 80% of available memory
				if(performance.memory.usedJSHeapSize < performance.memory.jsHeapSizeLimit * .8){
					var i = 0;
					while(i< 100){
						i++;
						memory.push(new Float64Array(Math.pow(2, 10)))
					}
				}
			}
		}
		function releaseMemory(){
			memory = [];
		}

		// We start animating at 60 frames per second
		startAnimating(60);
	</script>
	<button onclick="lag()">Increase load</button>
	<button onclick="releaseMemory()" style="margin-top:180px">Release memory</button>

	<a href="https://www.dwitter.net/d/21608">background by DataMeta</a>
</body>
</html>