text input field corrected critic error

index.html

@@ -148,6 +148,10 @@
 				<div class="column column-right">
 					<h2 class="sub-section-title">1. Paste byte array</h2>
 					<textarea id="byte-input" class="byte-input"></textarea><br />
+					<div class="text-input-size">
+						<input type="text" id="text-input-width" class="size-input" value="128" /> x
+						<input type="text" id="text-input-height" class="size-input" value="64" /> px
+					</div>
 					<button onclick="handleTextInput('horizontal')">Read as horizontal</button>
 					<button onclick="handleTextInput('vertical')">Read as vertical</button>
 				</div>
@@ -319,6 +323,7 @@
 			this.first = function() { return collection[0]; };
 			this.last = function() { return collection[collection.length - 1]; };
 			this.getByIndex = function(index) { return collection[index]; };
+			this.setByIndex = function(index, img) { collection[index] = img; };
 			this.get = function(img) {
 				if(img) {
 					for(var i = 0; i < collection.length; i++) {
@@ -517,11 +522,18 @@
 		function handleTextInput(drawMode){
 
 			images = new Images();
-			
+	
 			var canvas = document.createElement('canvas');
-			canvas.width = 128;
-			canvas.height = 64;
+			canvas.width = parseInt(document.getElementById("text-input-width").value);
+			canvas.height = parseInt(document.getElementById("text-input-height").value);
+
+			if(canvasContainer.children.length) {
+				canvasContainer.removeChild(canvasContainer.firstChild);
+			}
 			canvasContainer.appendChild(canvas);
+
+			var image = new Image();
+			images.setByIndex(0, {"img": image, "canvas" : canvas});
 			
 			var input = document.getElementById('byte-input').value;
 
@@ -936,7 +948,7 @@
 			ctx.putImageData(imgData, 0, 0);
 			var img = new Image();
 			img.src = canvas.toDataURL('image/png');
-			images.push(img);
+			images.first().img = img;
 		}
 
 
@@ -973,7 +985,7 @@
 						color = 255;
 					}
 					// color = 0;
-					drawPixel(x, (page*8)+y, color);
+					drawPixel(ctx, x, (page*8)+y, color);
 					y--;
 					if(y < 0){
 						y = 7;
@@ -988,7 +1000,9 @@
 			}
 			// Save the canvas contents inside the img object. This way we can
 			// reuse the img object when we want to scale / invert, etc.
+			var img = new Image();
 			img.src = canvas.toDataURL('image/png');
+			images.first().img = img;
 		}
 
 
@@ -1018,18 +1032,15 @@
 
 		// Quick and effective way to draw single pixels onto the canvas
 		// using a global 1x1px large canvas
-		var ctx = images && images.last() ? images.last().ctx : undefined;
-		if(ctx) {
+		function drawPixel(ctx, x, y, color) {
 			var single_pixel = ctx.createImageData(1,1);
 			var d  = single_pixel.data;
 
-			function drawPixel(x, y, color){
-				d[0] = color;
-				d[1] = color;
-				d[2] = color;
-				d[3] = 255;
-				ctx.putImageData(single_pixel, x, y);
-			}/**/
+			d[0] = color;
+			d[1] = color;
+			d[2] = color;
+			d[3] = 255;
+			ctx.putImageData(single_pixel, x, y);
 		}
 	</script>
 </body>