So Canvas Animation

An HTML5 example of Canvas feature. We draw an animation based on Matrix.

HTML

<!DOCTYPE html>
<body>
    	<h1>So Canvas Animations</h1>

    <canvas id="matrix">Texte alternatif. Votre navigateur ne supporte pas encore le dessin sur toile !</canvas>
    <script src="js/script.js"></script>
</body>

CSS

*{
	padding:0;
	margin:0;
}
body{
	font-family:Calibri, sans-serif;
	font-size:14px;
	background-color:black;
}

h1, h2, h3, h4, h5, h6{ 
	text-align:center; 
	color: rgb(177, 202, 0); 
	text-shadow: -2em -0.5em 2px #DDDDDD;

	position:fixed;
	top:0;
	left:0;
	right:0;
	padding:1em;
	z-index:1;
}

#matrix{
	position:fixed;
}

.w50{ width: 50%; }
.w25{ width: 25%; }

.fleft{ float: left; }
.fright{ float: right; }

.tacenter{ text-align:center; }

.msg{ 
	font-family: monospace;
	color: rgb(177, 202, 0); 
	font-weight: bold;
}
.status{
	color: gray;
	font-style: italic;
}
.error{
	color: red;
}

JavaScript

//original source :  http://timelessname.com/sandbox/matrix.html
var matrix = document.getElementById('matrix');
var ctx = matrix.getContext('2d');

/* La toile prend tout l'espace à l'écran */
matrix.height = window.screen.availHeight;
matrix.width = window.screen.availWidth;

var ypositions = []; /* Mémoire de l'ordonnée courante*/
var characters = []; /* Mémoire du caractère courant */
var clmncolors = []; /* Mémoire de la couleur courante */

/* Les véritables couleurs officielles, merci Melvyna ! */
var sogray = "#B3B3B3";
var sogreen = "#99CC00";
var soorange = "#e65c00";

var chars = ['S', 'o', '@', 't']; /* Les caractères que nous affichons */
var colors = [sogreen, sogray, soorange]; /* Les couleurs que peuvent prendre ces caractères. */

/*
 * Nous calculons le nombre de colonnes à dessiner en fonction
 * de la largeur du plus gros caractère.
 * Il est inutile de dessiner des colonnes qui sortent de la toile.
 *
 * Pour être encore plus générique le code devrait boucler sur "chars"
 * et déterminer lui même le plus large des caractères.
 */
var cw = ctx.measureText("@").width + 10; /* Nous ajoutons 10 pixels pour aérer entre deux colonnes de '@' */
var ch = 10; /* Nous aurons un caractère tous les 10 pixels verticalement. */
var nbc = Math.floor(matrix.width / cw); /* nbc pour "number of columns" */

/*
 * i est l'indice d'une colonne.
 * ResetColumn attribue aléatoirement une couleur et un caractère à la colonne i.
 * L'ordonnée courante est remise à 0. (Donc on reprendra le dessin depuis le haut.)
 */
function ResetColumn(i) {
    ypositions[i] = 0;
    characters[i] = chars[Math.floor(Math.random() * chars.length)];
    clmncolors[i] = colors[Math.floor(Math.random() * colors.length)];
}

/* Une petite initialisation */
for (i = 0; i < nbc; i++) {
    ResetColumn(i);
    /* 
     * Pour éviter l'effet "rideau" (tous les points ont 0 en ordonnée)
     * nous attribuons une ordonnée aléatoire.
     * Du coup les colonnes "démarrent" n'importe où sur la...