gistfile1.js

c = document.getElementById("canvas")
ctx = c.getContext("2d")
ctx.fillStyle="#420082";

function centerSquare(x, y, size) {
    ctx.fillRect(x-size/2,y-size/2,size,size);
}

function surround(x,y, size) {
    var result = [];
    for(var i = 0; i < 3; i++) {
        for(var j = 0; j < 3; j++) {
            centerSquare(x-size+i*size, y-size+j*size, size/3);
            result.push([x-size+i*size, y-size+j*size]);
        }
    }
    return result;
}
ctx.fillStyle="#420082";
centerSquare(750/2, 750/2, 729);
document.getElementById("doom0").href=c.toDataURL("image/png");
ctx.fillStyle="#FFFFFF";
centerSquare(750/2, 750/2, 729/3);
document.getElementById("doom1").href=c.toDataURL("image/png");
var this_gen = [[750/2,750/2]];
var next_gen = [];
var size = 729/3;
for(var gen = 2; gen <= 6; gen++) {
    var next_gen = []
    console.log(this_gen);
    for(var i = 0; i < this_gen.length; i++) {
        var result = surround(this_gen[i][0], this_gen[i][1], size);
        next_gen = next_gen.concat(result);
    }
    document.getElementById("doom"+gen).href=c.toDataURL("image/png");
    size /= 3;
    this_gen = next_gen.slice();
}
ctx.stroke()
document.getElementById("doom").href=c.toDataURL("image/png");