Создание текстовых изображений внутри тега Canvas ⇐ CSS

[Anonymous]

Я хочу создать текстовое изображение (несколько символов внутри изображения, образующих слово), например слово «Матрица» внутри холста, имеющего эффект матрицы. Проблема, с которой я сталкиваюсь, - это отображение текста внутри холста, а затем создание аналогичного эффекта мигания или каскадирования для формирования слова. Это то, что у меня есть на данный момент для холста, без текстового изображения.

Код: Выделить всё

var c = document.getElementById("c"),
ctx = c.getContext("2d");
c.height = window.innerHeight, c.width = window.innerWidth;
var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
matrix = matrix.split("");
for (var font_size = 10, columns = c.width / font_size, drops = [], x = 0; x < columns; x++) drops[x] = 1;

function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.08)", ctx.fillRect(0, 0, c.width, c.height), ctx.fillStyle = "#0f0", ctx.font = font_size + "px courier";
for (var t = 0; t < drops.length; t++) {
var i = matrix[Math.floor(Math.random() * matrix.length)];
ctx.fillText(i, t * font_size, drops[t] * font_size), drops[t] * font_size > c.height && Math.random() > .975 && (drops[t] = 0), drops[t]++
}
}
setInterval(draw, 15);

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/622 ... canvas-tag