ComputerCraft Javascript Image Renderer

/*
    ComputerCraft Image file Javascript Renderer.
     © Copyright 2013. Mitchfizz05.

    Version 1.1. Uses correct colors. Thanks theoriginalbit! ;)

    -=JAVASCRIPT FILE=-
*/

// Variables.
var pixelWidth  = 10; // Width of each pixel.
var pixelHeight = 14; // Height of each pixel.
var zoom = 2; // Original sizes will be multiplied by this.
var debug = false; // Recommended you keep false unless developing with this.
var pixelBorders = false; // Debug option. Display borders around pixels. (May offset pixels by a very small amount)

// Init.
pixelWidth = pixelWidth * zoom; // Zoom stuff in.
pixelHeight = pixelHeight * zoom;

console.log("ComputerCraft Javascript Image Renderer init.");

// Running as a file on a harddrive?
if ( document.URL.substring(0, "file://".length) == "file://" ) {
    console.log("WARNING! Running on hard drive! Files can't be read while running on hard drive! Consider uploading to a webserver!");
}

var colors = new Array(); // Resolves the characters in the CC image to colors for HTML.
colors['0'] = '#f0f0f0';
colors['1'] = '#f2b233';
colors['2'] = '#e57fd8';
colors['3'] = '#99b2f2';
colors['4'] = '#dede6c';
colors['5'] = '#7fcc19';
colors['6'] = '#f2b2cc';
colors['7'] = '#4c4c4c';
colors['8'] = '#999999';
colors['9'] = '#4c99b2';
colors['a'] = '#b266e5';
colors['b'] = '#253192';
colors['c'] = '#7f664c';
colors['d'] = '#57a64e';
colors['e'] = '#cc4c4c';
colors['f'] = '#191919';

// Functions.
function renderPixel(canvas, color) {
    if (debug == true) {
        console.log("Drawing pixel. Canvas: " + canvas.id + ". Color: " + color)
    }

    var extraStyles = '';
    if (pixelBorders == true) {
        extraStyles = extraStyles + ' border: solid 1px black; ';
    }

    var append = "<div style=\"float: left; width: " + pixelWidth + "px; height: " + pixelHeight + "px; background-color: " + color + ";" + extraStyles + "\">";
    var existing = canvas.innerHTML;
    var newCanvas = existing + append;
    canvas.innerHTML = newCanvas;
}

function renderBlankPixel(canvas) {
    if (debug == true) {
        console.log("Drawing blank pixel. Canvas: " + canvas.id)
    }
    var append = "<div style=\"float: left; width: " + pixelWidth + "px; height: " + pixelHeight + "px;\">";
    var existing = canvas.innerHTML;
    var newCanvas = existing + append;
    canvas.innerHTML = newCanvas;
}

function nextLine(canvas) {
    if (debug == true) {
        console.log("Going to next line. Canvas: " + canvas.id);
    }

    var newCanvas = canvas.innerHTML + "<br clear=\"both\">";
    canvas.innerHTML = newCanvas;
}

function renderImageRow(canvas, image) { // Takes a row of an image and renders it.

    for ( var i=0; i < image.length; i++ ) { // Loop through each character.
        var pixel = image[i];
        if ( pixel == " " ) { // We must render the correct type of pixel (transparrent and colored).
            renderBlankPixel(canvas);
        } else {
            renderPixel(canvas, colors[pixel]); // Render the actual single pixel.
        }
    }

}

function renderImageFromFile(canvas, fileStr) { // Takes a file path and outputs the image.

    var image = new XMLHttpRequest();
    image.open("GET", fileStr, true);
    image.onreadystatechange = function() {
        if (image.readyState === 4) {  // document is ready to parse.
            if (image.status === 200) {  // file is found
                allText = image.responseText;
                lines = image.responseText.split("\n");

                for (var i=0; i < lines.length; i++) {
                    renderImageRow(canvas, lines[i]);
                    nextLine(canvas);
                }

            }
        }
    }
    image.send(null);

}

function clearCanvas(canvas) {
    canvas.innerHTML = "";
}