Added FPS display

index.html

@@ -40,18 +40,35 @@
 			padding: 0;
 		}
 
-		label {
+		label,
+		dl dt {
 			font-weight: bold;
 		}
 
-		label::after {
+		label::after,
+		dl dt::after {
 			content: ":";
 		}
 
 		#color {
 			margin: 0 10px -8px 0;
 		}
 
+		dl {
+			overflow: hidden;
+		}
+
+		dl dt {
+			width: 40px;
+			float: left;
+			clear: left;
+		}
+
+		dl dd {
+			float: left;
+			margin-bottom: 6px;
+		}
+
 		p,
 		p a {
 			color: #444;
@@ -112,6 +129,13 @@ <h1>Chip-8 Emulator</h1>
 
 	    <canvas></canvas>
 
+		<dl>
+			<dt>Program</dt>
+			<dd id="loaded-program">None</dd>
+			<dt><abbr title="Frames Per Second">FPS</abbr></dt>
+			<dd id="fps">0</dd>
+		</dl>
+
 		<p>Chip-8 uses a hexadecimal input. Use the keys below, or use a gamepad if enabled.</p>
 
 		<ol>
@@ -158,6 +182,7 @@ <h1>Chip-8 Emulator</h1>
 				// Set up program loading form.
                 (function() {
 	                var select = document.querySelector("#program");
+					var programLoaded = document.querySelector("#loaded-program");
 	                var programs = ["15PUZZLE", "BLINKY", "BLITZ", "BRIX", "CONNECT4", "GUESS", "HIDDEN", "IBM", "INVADERS", "KALEID", "MAZE", "MERLIN", "MISSILE", "PONG", "PONG2", "PUZZLE", "SYZYGY", "TANK", "TETRIS", "TICTAC", "UFO", "VBRIX", "VERS", "WIPEOFF"];
 
 	                programs.forEach(function(program) {
@@ -185,6 +210,7 @@ <h1>Chip-8 Emulator</h1>
 	                        ch.reset();
 	                        ch.loadProgram(new Uint8Array(xhr.response));
 	                        ch.start();
+							programLoaded.textContent = value;
 	                    };
 
 	                    xhr.send();
@@ -352,6 +378,15 @@ <h1>Chip-8 Emulator</h1>
 	                    ch.unsetKey(translateKeys[event.keyCode]);
 	                });
 				})();
+
+				// FPS support.
+				(function() {
+					var fpsOutput = document.querySelector("#fps");
+					setInterval(function() {
+						fpsOutput.textContent = chRenderer.getFps().toPrecision(2);
+					}, 1e3);
+
+				})();
 
             })();
         </script>

scripts/renderer.js

@@ -5,6 +5,8 @@ var CanvasRenderer = function(canvas, width, height, cellSize, fgColor, bgColor)
     this.height = +height;
 	this.lastRenderedData = [];
     this.setCellSize(cellSize);
+	this.lastDraw = 0;
+	this.draws = 0;
 
     this.fgColor = fgColor || "#0f0";
     this.bgColor = bgColor || "transparent";
@@ -31,6 +33,8 @@ CanvasRenderer.prototype = {
             this.ctx.fillStyle = [this.bgColor, this.fgColor][display[i]];
             this.ctx.fillRect(x, y, this.cellSize, this.cellSize);
         }
+
+		this.draws++;
     },
 
     beep: function() {
@@ -69,5 +73,16 @@ CanvasRenderer.prototype = {
 	    this.canvas.height = cellSize * this.height;
 
 		this.render(this.lastRenderedData);
+	},
+
+	getFps: function() {
+
+		var fps = this.draws / (+new Date - this.lastDraw) * 1000;
+		if (fps == Infinity) {
+			return 0;
+		}
+		this.draws = 0;
+		this.lastDraw = +new Date;
+		return fps;
 	}
 };