Javascript Map

function init() {
    // Initalize the various page elements here...
    WebSocket_Open();
    Init_Map();
}

var lightgrey = "rgb(184,184,184)"; // background/unknown
var black = "rgb(0,0,0)";           // wall/barrier
var red = "rgb(255,0,0)";           // barrier
var green = "rgb(0,255,0)";         // goal
var blue = "rgb(0,0,255)";          // robot
var white = "rgb(255,255,255)";     // nothing/free
var grid = "rgb(255,250,205)";      // grid lines

function Init_Map() {
    var canvas = document.getElementById('map');
    if (canvas.getContext){
        var context = canvas.getContext('2d');
        context.fillStyle = lightgrey;
        context.fillRect( 0, 0, canvas.width, canvas.height );
    }
}

function drawMap(GridMapArray) {
    //Y is vertical, X is horizontal
    for (var Y = 0; Y < GridMapArray.length; Y++) {
        var Coords = GridMapArray[Y].strip().split(",");
        for (var X = 0; X < Coords.length; X++) {
            if (Coords[X] == "") { continue; }
            if (Coords[X] == ",") { continue; }
            if (Coords[X] == 0) { // nothing, white
                var r = 255;
                var g = 255;
                var b = 255;
            } else if (Coords[X] == 1) { // goal, green
                var r = 0;
                var g = 255;
                var b = 0;
            } else if (Coords[X] == 254) { // robot, blue
                var r = 0;
                var g = 0;
                var b = 255;
            } else if (Coords[X] == 255) { // wall, black
                var r = 0;
                var g = 0;
                var b = 0;
            }
            drawPixel(X, Y, r, g, b);
        }
    }
}

function drawPixel(x, y, r, g, b) {
    var canvas = document.getElementById('map');
    if (canvas.getContext){
        var context = canvas.getContext('2d');
        var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
        var PixelSize = 4;
        x *= PixelSize;
        y *= PixelSize;
        var index;
        for (var i = 0; i < PixelSize; i++) {
            for (var j = 0; j < PixelSize; j++) {
                index = (x  + (y + j) * canvas.width) * 4;
                canvasData.data[index + 0] = r;
                canvasData.data[index + 1] = g;
                canvasData.data[index + 2] = b;
                canvasData.data[index + 3] = 255; //Alpha Channel
            }
            ++x;
        }
        context.putImageData(canvasData, 0, 0);
    }
}

var GridMapArray = new Array();
function parseResponse(requestlist) {
    //mylog("Parsing: "+requestlist)
    for (var i=0; i<requestlist.length; i++) {
        var requestsplit = requestlist[i].strip().split(':')
        requestsplit[requestsplit.length] = "dummy";
        command = requestsplit[0];
        value = requestsplit[1];
        value2 = requestsplit[2];

        if( command == "get.Map" ) {
          if (value == "NONE" && value2 == "NONE") {
            mylog("..Currently no Grid Map Data available!..");
          } else {
            if (value == "END" && value2 == "END") {
              drawMap(GridMapArray);
            } else {
              //add to array..
              GridMapArray[value] = value2;
            }
          }
        }

    }
}