http://jsfiddle.net/mcrss/KwGK5/13/

/**
 * For habr :)
 */

//window.onload = function () {
    
    var canvas = document.getElementById('canvas');
    
    var context = canvas.getContext('2d');
    
    var width = canvas.width;
    var height = canvas.height;
    
    context.fillRect(0, 0, width, height);
    
    // Color states
    var states = ['#000', '#000', '#000', '#000', '#000', '#000', '#000', '#000', '#000', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff'];
    
    // Color states (byte triplets)
    var byteStates = [];
    
    // Converting string color states to byte triplets
    for (var a = 0; a < states.length; a++) {
        byteStates[a] = [
            parseInt(states[a].charAt(1) + states[a].charAt(1), 16),
            parseInt(states[a].charAt(2) + states[a].charAt(2), 16),
            parseInt(states[a].charAt(3) + states[a].charAt(3), 16)
        ]
    }
    
    // 2-dimensional array of cell states
    var field = [];
    
    // Filling up the field by random states
    for (var y = 0; y < height; y++) {
        
        var row = [];
        
        for (var x = 0; x < width; x++) {
            row[x] = Math.floor(Math.random() * byteStates.length);
        }
        
        field[y] = row;
        
    }
    
    // Field renderer
    var draw = function () {
        
        var imageData = context.getImageData(0, 0, width, height);
        
        for (var y = 0; y < height; y++) {
            
            for (var x = 0; x < width; x++) {
                
                var offset = (width * y + x) * 4;
                
                imageData.data[offset] = byteStates[field[y][x]][0];
                imageData.data[offset + 1] = byteStates[field[y][x]][1];
                imageData.data[offset + 2] = byteStates[field[y][x]][2];
                
            }
            
        }
        
        context.putImageData(imageData, 0, 0);
        
    }
    
    draw();
    
    // Ticker
    setInterval(function () {
        
        var newField = [];
        
        for (var y = 0; y < height; y++) {
            
            var newRow = [];
            
            for (var x = 0; x < width; x++) {
                
                var newState = (field[y][x] + 1) % byteStates.length;
                
                if (
                    (field[(y + height - 1) % height][x] == newState) ||
                    (field[(y + 1) % height][x] == newState) ||
                    (field[y][(x + width - 1) % width] == newState) ||
                    (field[y][(x + 1) % width] == newState)
                ) {
                    newRow[x] = newState;
                } else {
                    newRow[x] = field[y][x];
                }
                
            }
            
            newField[y] = newRow;
            
        }
        
        field = newField;
        
        draw();
        
    }, 50);
    
//}