geoffb · June 2, 2010 03:46
diff --git a/canvas_perf_demo.html b/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>