geoffb/canvas_perf_demo.html

## canvas_perf_demo.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Canvas Performance Demo</title>
</head>
<body>

	<div>
		<h1>Canvas Performance Test</h1>
		<label for="num_boxes">Boxes:</label>
		<input type="text" id="num_boxes" value="1000"><br>
		<label for="test_time">Test Time (in milliseconds):</label>
		<input type="text" id="test_time" value="10000"><br>
		<button id="run_test">Run test</button>
	</div>

	<script type="text/javascript">

		var demo = {};

		demo.rand = function demo_rand (min, max) {
			return (Math.round(Math.random() * (max - min)) + min);
		};

		demo.makeBox = function demo_makeBox (width, height, color, speed) {
			var dir_x = (demo.rand(1, 2) === 1) ? -1: 1;
			var dir_y = (demo.rand(1, 2) === 1) ? -1: 1;
			return {
				x: 0,
				y: 0,
				width: width,
				height: height,
				color: color,
				speed: speed,
				direction: {
					x: dir_x,
					y: dir_y
				}
			};
		};

		demo.drawBox = function demo_drawBox (ctx, box) {
			ctx.save();
			ctx.fillStyle = box.color;
			ctx.fillRect(parseInt(box.x), parseInt(box.y), box.width, box.height);
			ctx.restore();
		};

		var view = {
			width: 640,
			height: 480
		};

		var canvas = document.createElement("canvas");
		canvas.width = view.width;
		canvas.height = view.height;
		document.body.appendChild(canvas);

		var ctx = canvas.getContext("2d");

		ctx.save();
		ctx.fillStyle = "rgb(0, 0, 0)";
		ctx.fillRect(0, 0, view.width, view.height);
		ctx.restore();

		demo.run = function (box_count, time) {

			ctx.save();
			ctx.fillStyle = "rgb(0, 0, 0)";
			ctx.fillRect(0, 0, view.width, view.height);
			ctx.restore();

			// Create some boxes
			var boxes = [];
			var num_boxes = box_count;
			for (var x = 0; x < num_boxes; x++) {
				var color = "rgb("
					+ demo.rand(0, 255) + ", "
					+ demo.rand(0, 255) + ", "
					+ demo.rand(0, 255) + ")";
				var box = demo.makeBox(10, 10, color, demo.rand(50, 100));
				box.x = demo.rand(0, view.width - box.width);
				box.y = demo.rand(0, view.height - box.height);
				boxes.push(box);
			}

			var last_update = 0;
			var elapsed_log = [];

			var update = function update () {
				var now = new Date().getTime();
				elapsed = now - last_update;
				elapsed_log.push(elapsed);
				last_update = now;

				ctx.fillStyle = "rgb(0, 0, 0)";
				ctx.fillRect(0, 0, view.width, view.height);

				// Move boxes and check collision
				for (var x = 0; x < boxes.length; x++) {
					var b = boxes[x];
					var pixels = ((b.speed / 1000) * elapsed);
					b.x += (pixels * b.direction.x);
					b.y += (pixels * b.direction.y);
					if (b.x > (view.width - b.width)) {
						b.x = (view.width - b.width);
						b.direction.x = -1;
					}
					if (b.x < 0) {
						b.x = 0;
						b.direction.x = 1;
					}
					if (b.y > (view.height - b.height)) {
						b.y = (view.height - b.height);
						b.direction.y = -1;
					}
					if (b.y < 0) {
						b.y = 0;
						b.direction.y = 1;
					}
					demo.drawBox(ctx, b);
				}

			};

			last_update = new Date().getTime();
			var interval_id = window.setInterval(update, 0);

			window.setTimeout(function () {

				window.clearInterval(interval_id);

				var sum = 0;
				for (var x in elapsed_log) {
					sum += elapsed_log[x];
				}
				var avg = Math.round(sum / elapsed_log.length);

				ctx.save();
				ctx.fillStyle = "rgba(0,0,0,0.75)";
				ctx.fillRect(0, 0, view.width, 30);
				ctx.restore();

				ctx.save();
				ctx.fillStyle = "rgb(255, 255, 255)";
				ctx.font = "20px Courier";
				ctx.fillText("Test complete. Average FPS: " + Math.round(1000 / avg), 5, 20);
				ctx.restore();

			}, time);
		}

		var run_button = document.getElementById("run_test");
		run_button.addEventListener("click", function () {
			var num_boxes = document.getElementById("num_boxes").value;
			var test_time = document.getElementById("test_time").value;
			demo.run(num_boxes, test_time);
		}, true);

	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Canvas Performance Demo</title>
	</head>
	<body>

	<div>
	<h1>Canvas Performance Test</h1>
	<label for="num_boxes">Boxes:</label>
	<input type="text" id="num_boxes" value="1000"><br>
	<label for="test_time">Test Time (in milliseconds):</label>
	<input type="text" id="test_time" value="10000"><br>
	<button id="run_test">Run test</button>
	</div>

	<script type="text/javascript">

	var demo = {};

	demo.rand = function demo_rand (min, max) {
	return (Math.round(Math.random() * (max - min)) + min);
	};

	demo.makeBox = function demo_makeBox (width, height, color, speed) {
	var dir_x = (demo.rand(1, 2) === 1) ? -1: 1;
	var dir_y = (demo.rand(1, 2) === 1) ? -1: 1;
	return {
	x: 0,
	y: 0,
	width: width,
	height: height,
	color: color,
	speed: speed,
	direction: {
	x: dir_x,
	y: dir_y
	}
	};
	};

	demo.drawBox = function demo_drawBox (ctx, box) {
	ctx.save();
	ctx.fillStyle = box.color;
	ctx.fillRect(parseInt(box.x), parseInt(box.y), box.width, box.height);
	ctx.restore();
	};

	var view = {
	width: 640,
	height: 480
	};

	var canvas = document.createElement("canvas");
	canvas.width = view.width;
	canvas.height = view.height;
	document.body.appendChild(canvas);

	var ctx = canvas.getContext("2d");

	ctx.save();
	ctx.fillStyle = "rgb(0, 0, 0)";
	ctx.fillRect(0, 0, view.width, view.height);
	ctx.restore();

	demo.run = function (box_count, time) {

	ctx.save();
	ctx.fillStyle = "rgb(0, 0, 0)";
	ctx.fillRect(0, 0, view.width, view.height);
	ctx.restore();

	// Create some boxes
	var boxes = [];
	var num_boxes = box_count;
	for (var x = 0; x < num_boxes; x++) {
	var color = "rgb("
	+ demo.rand(0, 255) + ", "
	+ demo.rand(0, 255) + ", "
	+ demo.rand(0, 255) + ")";
	var box = demo.makeBox(10, 10, color, demo.rand(50, 100));
	box.x = demo.rand(0, view.width - box.width);
	box.y = demo.rand(0, view.height - box.height);
	boxes.push(box);
	}

	var last_update = 0;
	var elapsed_log = [];

	var update = function update () {
	var now = new Date().getTime();
	elapsed = now - last_update;
	elapsed_log.push(elapsed);
	last_update = now;

	ctx.fillStyle = "rgb(0, 0, 0)";
	ctx.fillRect(0, 0, view.width, view.height);

	// Move boxes and check collision
	for (var x = 0; x < boxes.length; x++) {
	var b = boxes[x];
	var pixels = ((b.speed / 1000) * elapsed);
	b.x += (pixels * b.direction.x);
	b.y += (pixels * b.direction.y);
	if (b.x > (view.width - b.width)) {
	b.x = (view.width - b.width);
	b.direction.x = -1;
	}
	if (b.x < 0) {
	b.x = 0;
	b.direction.x = 1;
	}
	if (b.y > (view.height - b.height)) {
	b.y = (view.height - b.height);
	b.direction.y = -1;
	}
	if (b.y < 0) {
	b.y = 0;
	b.direction.y = 1;
	}
	demo.drawBox(ctx, b);
	}

	};

	last_update = new Date().getTime();
	var interval_id = window.setInterval(update, 0);

	window.setTimeout(function () {

	window.clearInterval(interval_id);

	var sum = 0;
	for (var x in elapsed_log) {
	sum += elapsed_log[x];
	}
	var avg = Math.round(sum / elapsed_log.length);

	ctx.save();
	ctx.fillStyle = "rgba(0,0,0,0.75)";
	ctx.fillRect(0, 0, view.width, 30);
	ctx.restore();

	ctx.save();
	ctx.fillStyle = "rgb(255, 255, 255)";
	ctx.font = "20px Courier";
	ctx.fillText("Test complete. Average FPS: " + Math.round(1000 / avg), 5, 20);
	ctx.restore();

	}, time);
	}

	var run_button = document.getElementById("run_test");
	run_button.addEventListener("click", function () {
	var num_boxes = document.getElementById("num_boxes").value;
	var test_time = document.getElementById("test_time").value;
	demo.run(num_boxes, test_time);
	}, true);

	</script>

	</body>
	</html>