getImageDataとputImageDataとを適当なオフセットで用いることにより、imgDataの中のデータをあからさまにシフトする必要が無くなります。
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() {
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
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);
}
function emitParticles(myarray) {
ctx.putImageData(imgData, 0, 1);
imgData = ctx.getImageData(0, 0, 512, 512);
for (j = 0; j < 512; j++) {
imgData.data[0 + j * 4] = (myarray[(j>>4)%8] - 48) * 32 % 256;
imgData.data[1 + j * 4] = j % 256;
imgData.data[2 + j * 4] = 0;
imgData.data[3 + j * 4] = 255;
}
}
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>