var Overprint = {
	Char: {
		NULL: ' ',
		SPACE: ' '	
	},
	Color: {
		BLACK: '#000',
		WHITE: '#fff'
	},
	Cell: {
		WIDTH: 14,
		HEIGHT: 14
	}
};

Overprint.Glyph = function(character, color, bgColor) {
	return {
		char: character || Overprint.Char.NULL,
		color: color || Overprint.Color.WHITE,
		bgColor: bgColor || Overprint.Color.BLACK
	}
}

Overprint.Terminal = function(width, height, canvas) {
	this._width = width;
	this._height = height;

	var cell = this._emptyCell = Overprint.Glyph();

	canvas.width =  Overprint.Cell.WIDTH * this._width;
	canvas.height = Overprint.Cell.HEIGHT * this._height;

	this._context = canvas.getContext('2d');

	this._display = new Overprint.DisplayState(width, height, cell);
}

Overprint.Terminal.prototype.clear = function() {
	for (var row=0; row<this._width; row++) {
		for (var col=0; col<this._height; col++) {
			this._display.setCell(row, col, Overprint.Glyph());
		}
	}
}

Overprint.Terminal.prototype.writeGlyph = function(x, y, glyph) {
	this._display.setCell(x, y, glyph);
}

Overprint.Terminal.prototype.render = function() {
	var cellWidth = Overprint.Cell.WIDTH;
	var cellHeight = Overprint.Cell.HEIGHT;

	this._display.render(function(x, y, glyph){
		this._context.fillStyle = glyph.bgColor;
		this._context.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);

		this._context.fillStyle = glyph.color;
		this._context.fillText(glyph.char, x * cellWidth, y * cellHeight);
	}.bind(this));
}

Overprint.DisplayState = function(width, height, cell) {
	function fillArray2D(width, height, fill) {
		var list = new Array(width);
		for (var row=0; row<width; row++) {
			list[row] = new Array(height);
			for (var col=0; col<height; col++) {
				list[row][col] = fill;
			}
		}
		return list;
	}

	this._width = width;
	this._height = height;
	this._emptyCell = cell;

	this._renderedCells = fillArray2D(width, height, cell);
	this._updatedCells = fillArray2D(width, height, cell);
}

Overprint.DisplayState.prototype.setCell = function(x, y, cell) {
	if (x < 0) return;
	if (x >= this._width) return;
	if (y < 0) return;
	if (y >= this._height) return;

	if (!cell) cell = this._emptyCell;

	if (this._renderedCells[x][y] !== cell) {
		this._updatedCells[x][y] = cell;
	} else {
		this._updatedCells[x][y] = null;
	}
}

Overprint.DisplayState.prototype.render = function(callback) {
	for (var row=0; row<this._width; row++) {
		for (var col=0; col<this._height; col++) {
			var cell = this._updatedCells[row][col];

			if (cell == null) continue;

			callback(row, col, cell);

			this._renderedCells[row][col] = cell;
			this._updatedCells[row][col] = null;
		}
	}
}

@@ -768,34 +768,34 @@
 %7B%0A%09for (var 
-row
+col
 =0; 
-row
+col
 %3Cthis._width
@@ -788,35 +788,35 @@
 ol%3Cthis._width; 
-row
+col
 ++) %7B%0A%09%09for (var
@@ -812,34 +812,34 @@
 %0A%09%09for (var 
-col
+row
 =0; 
-col
+row
 %3Cthis._heigh
@@ -833,35 +833,35 @@
 w%3Cthis._height; 
-col
+row
 ++) %7B%0A%09%09%09this._d
@@ -875,24 +875,24 @@
 setCell(
-row, col
+col, row
 , Overpr
@@ -1599,26 +1599,26 @@
 var 
-row
+col
 =0; 
-row
+col
 %3Cwidth; 
 row+
@@ -1609,27 +1609,27 @@
  col%3Cwidth; 
-row
+col
 ++) %7B%0A%09%09%09lis
@@ -1630,19 +1630,19 @@
 %09%09%09list%5B
-row
+col
 %5D = new 
@@ -1668,26 +1668,26 @@
 or (var 
-col
+row
 =0; 
-col
+row
 %3Cheight;
@@ -1679,35 +1679,35 @@
 =0; row%3Cheight; 
-col
+row
 ++) %7B%0A%09%09%09%09list%5Br
@@ -1705,24 +1705,24 @@
 %09%09%09list%5B
-row%5D%5Bcol
+col%5D%5Brow
 %5D = fill
@@ -2344,34 +2344,34 @@
 %7B%0A%09for (var 
-row
+col
 =0; 
-row
+col
 %3Cthis._width
@@ -2372,19 +2372,19 @@
 _width; 
-row
+col
 ++) %7B%0A%09%09
@@ -2388,34 +2388,34 @@
 %0A%09%09for (var 
-col
+row
 =0; 
-col
+row
 %3Cthis._heigh
@@ -2417,19 +2417,19 @@
 height; 
-col
+row
 ++) %7B%0A%09%09
@@ -2459,24 +2459,24 @@
 edCells%5B
-row%5D%5Bcol
+col%5D%5Brow
 %5D;%0A%0A%09%09%09i
@@ -2519,16 +2519,16 @@
 ack(
-row, col
+col, row
 , ce
@@ -2552,32 +2552,32 @@
 nderedCells%5B
-row%5D%5Bcol
+col%5D%5Brow
 %5D = cell;%0A%09%09
@@ -2600,16 +2600,16 @@
 lls%5B
-row%5D%5Bcol
+col%5D%5Brow
 %5D = 

Swap col and row to represent a meaningful ordering