(function(window, document, undefined) { 
    window.onload = init;
    function init() {
        
        //create an empty map
        var map = new Array(960);
        for(var i = 0; i < 960; i++) {
            map[i] = new Array(540);
        }
        
        //get the canvas
        var canvas = document.getElementById("mapcanvas");
        var c = canvas.getContext("2d");
        
        var id = c.createImageData(1,1);
        var d = id.data;
        d[0]   = 0;
        d[1]   = 0;
        d[2]   = 0;
        d[3]   = 1;
        
        function ncount(i,j) {
            var i1 = i+1;
            var i2 = i-1;
            var j1 = j+1;
            var j2 = j-1;
            var neighbors = 0;
            if(i1 < 960 && i2 >=0 && j1 < 540 && j2 >=0){
                if(map[i1][j1] == 1){
                    neighbors++;
                }
                if(map[i][j1] == 1){
                    neighbors++;
                }
                if(map[i2][j1] == 1){
                    neighbors++;
                }
                if(map[i1][j] == 1){
                    neighbors++;
                }
                if(map[i2][j] == 1){
                    neighbors++;
                }
                if(map[i1][j2] == 1){
                    neighbors++;
                }
                if(map[i][j2] == 1){
                    neighbors++;
                }
                if(map[i2][j2] == 1){
                    neighbors++;
                }
            }
            return neighbors;
        }
        
        //when we click, assign values and then paint
        document.getElementById("startbtn").onclick = paint;
        var it = 1;
        function paint() {
            if(it == 1){
                //fill the values
                for(var i = 0; i< 960; i++) {
                    for(var j = 0; j < 540; j++) {
                        if(Math.random() < .45){
                            map[i][j] = 1;
                        } else {
                            map[i][j] = 0;
                        }
                    }
                }
            } else {
                for(var i = 0; i< 960; i++) {
                    for(var j = 0; j < 540; j++){
                        var nc = ncount(i,j);
                        switch(nc){
                            case 4:
                                break;
                            case 5:
                                map[i][j] = 1;
                                break;
                            case 6:
                                map[i][j] = 1;
                                break;
                            case 7:
                                map[i][j] = 1;
                                break;
                            case 8:
                                map[i][j] = 1;
                                break;
                            default:
                                map[i][j] = 0;
                        }
                    }
                }
            }
            
            
            
            //paint the map
            for(var i = 0; i < 960; i++) {
                for(var j = 0; j< 540; j++){
                    if(map[i][j] == 1){
                        c.putImageData(id, i, j);
                    }else {
                        
                    }
                }
            }
            it++;
            document.getElementById("iter").innerHTML = it;
        }
    }
})(window, document, undefined);

@@ -398,17 +398,22 @@
    var i
-d
+mgData
  = c.cre
@@ -431,12 +431,14 @@
 a(1,
+ 
 1);%0A
+%0A
     
@@ -449,100 +449,221 @@
 var 
-d = id.data;%0A        d%5B0%5D   = 0;%0A        d%5B1%5D   = 0;%0A        d%5B2%5D   = 0;%0A        d%5B3%5D   = 1;
+i;%0A        for (i = 0; i %3C imgData.data.length; i += 4) %7B%0A            imgData.data%5Bi+0%5D = 255;%0A            imgData.data%5Bi+1%5D = 0;%0A            imgData.data%5Bi+2%5D = 0;%0A            imgData.data%5Bi+3%5D = 255;%0A        %7D%0A%0A
 %0A   
@@ -3376,17 +3376,22 @@
 geData(i
-d
+mgData
 , i, j);

Update script.js