Матрица на Canvas HTML5
Разберем создание динамической матрицы на cnavas. Которую можно использовать, как шапку сайта, то есть должна должна адаптироваться к ширине окна. По желанию и к высоте.
Демоmatrix.js 
В примере буду использовать библиотеку GCF.js, там реализованы функции удобной выборке DOM элементов, случайного числа в пределе, и клонирование объектов.
На HTML форме нам потребуется только сам canvas, в нашем случае с заданной высотой.
<style>
     #background {
          background: #000;
     }
</style>
<canvas id="background" height="200"></canvas>
Фон будем задавать на CSS.

Как страница загрузится, вызовем инициализацию матрицы
window.addEventListener('load', function() {
     matrix.init();
});

В демо примере в скрипте matrix.js в функции init будем отслеживать изменение размера страницы
this.resize();
window.onresize = this.resize.bind(this);
Забавный момент, вероятно есть причина, но при изменении размера canvas сбрасывается установленный стиль текста, а именно его размер, поэтому в функции resize, после изменения размера canvas равного ширине страницы, установим стиль текста
resize: function() {
     this._box.width = document.body.clientWidth;
     this.initStyle();
},

initStyle: function() {
     this._ctx.font = 'normal 12px Tahoma';
     this._ctx.textBaseline = 'top'; 
},

Так же в init создается массив this._data, где мы будим хранить нашу матрицу, строки и столбцы.
И устанавливается таймер, каждую 1 десятую секунды будет вызывается функция this.draw, которая выполняет отрисовку одной строки.

В this.draw первым делом добавим в данные новую строку this.addLine.
Добавляем в наш массив с данными пустую строку this._data.unshift([]);
И побегаем циклом по количеству колонок. Каждая строка может отличаться длинной, так как размеры окна браузера могли быть изменены
getCountColumns: function() {
     return Math.ceil(this._box.width / 20);
}
20 в нашем случае это ширина колонки в пикселях, зависит от размера шрифта.

Возвращаемся к addLine, в цикле в каждую ячейку помещаем символ, можно брать из заготовленных, мы будем генерировать случайную английскую букву или цифру.

Генерация происходит в this.getnerate, в качестве аргумента будем отправлять предыдущее значение, если нет то пустоту.
for (var i = 0; i < this.getCountColumns(); i++) {
     this._data[0][i] = this.getnerate(this._data[1] ? this._data[1][i] : null);
}
Будет 3 варианта генерации:
1) если нет предыдущего значение или оно уже полупрозрачно и случайное число от 0 до 10 будет 0, то мы генерируем новое значение
2) если есть предыдущее значение и оно еще не полностью прозрачно, то уменьшаем его прозрачность
3) будет пустота
if ((!old || old.a < 0.5) && GCF.random(0, 10) == 0) {
     return {a: 1, s: Math.random().toString(36).slice(2, 3)};  // Новое значение
} else if (old && old.a > 0) {
     old = GCF.clone(old);   // Скопируем их
     old.a -= 0.15;          // Уменьшим прозрачность на 0,15
     return old;
} else {
     return null;  // Пустота
}
Функция Math.random().toString(36) возвращает случайную строку, например: 0.dzfmnefffz4rfva6dv5lmobt9
GCF.clone(old); Клонирует объект. То есть изменив новый, старый останется неизменный.
a - прозрачность, s - символ.

Данные готовы, теперь отчистим старое, и отрисуем новый кадр.
this._ctx.clearRect(0, 0, this._box.width, this._box.height);  // Отчистим canvas

for (var i = 0; i < this._data.length; i++) {  // Перебор строк
     for (var c = 0; c < this._data[i].length; c++) {  // Перебор символов
          if (this._data[i][c]) { // Если не пустота
               this._ctx.fillStyle = 'rgba(34, 115, 227, ' + this._data[i][c].a + ')';  // Установим стиль на основе прозрачности символа
               this._ctx.fillText(this._data[i][c].s, c * 20, i * 20);  // Нарисуем сивол
          }
     }
}

// Обежим лишнее от массива
this._data = this._data.slice(0, 10);
Так как высота фиксирована в 10 строк, обрезаем лишнее, если это используется как фон, стоит сделать функцию по аналогии getCountColumns, которая будет возвращать количество строк. И тогда обрезать лишнее.

В качестве дополнения, можно сделать, что бы иногда проскакивали целые слова.
Демоmatrix2.js 
Отличие в том, что перед заполнением новой строки, на основе предыдущей, можно найти места куда влезут слова.
А при вставке нового символа, проверять нет ли уже на его месте слова.