ウォーターフォール画像を描画するもう少し自然な方法は、createImageData, getImageData, putImageDataといったメソッドを使うことでしょうか。
index.html
<!doctype html>
<html>
<head>
<script src='/socket.io/socket.io.js'></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
var nxdata = 32;
var nydata = 32;
var myarray = Array(nxdata);
var mytable = Array(nxdata * nydata);
var socket = io();
var canvas;
var ctx;
var imgData;
window.addEventListener("load", init);
function init() {
console.log('init..');
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
if (canvas.getContext && canvas.getContext('2d').createImageData) {
imgData = ctx.createImageData(512, 512);
for (i = 0; i < 512; i++) {
for (j = 0; j < 512; j++) {
imgData.data[0 + j * 4 + i * imgData.width * 4] = j % 256;
imgData.data[1 + j * 4 + i * imgData.width * 4] = (255 - (i % 256));
imgData.data[2 + j * 4 + i * imgData.width * 4] =
((i / 2 + j / 2) % 256);
imgData.data[3 + j * 4 + i * imgData.width * 4] = 255;
}
}
ctx.putImageData(imgData, 0, 0);
}
}
var count = 0;
var marker = 0;
function emitParticles(myarray) {
count++;
if (count % 128 == 0) {
marker = 255;
count = 0;
} else {
marker = 0;
}
for (j = 0; j < 512; j++) {
imgData.data[0 + j * 4 + (512 - 1) * imgData.width * 4] = marker;
imgData.data[1 + j * 4 + (512 - 1) * imgData.width * 4] = 0;
imgData.data[2 + j * 4 + (512 - 1) * imgData.width * 4] =
(32 * myarray[(j >> 3) % 10]) % 256;
imgData.data[3 + j * 4 + (512 - 1) * imgData.width * 4] = 255;
}
for (i = 0; i < 512 - 1; i++) {
for (j = 0; j < 512; j++) {
for (k = 0; k < 4; k++) {
imgData.data[k + j * 4 + i * imgData.width * 4] =
imgData.data[k + j * 4 + (i + 1) * imgData.width * 4];
}
}
}
ctx.putImageData(imgData, 0, 0);
}
socket.on('time', function(data) {
myarray = data.buffer;
emitParticles(myarray);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="512" height="512" style="background:white;">
</canvas>
<p id='messages'></p>
</body>
</html>