javascript - javascript ImageData のコピーまたは移動のパフォーマンス

Question

Web ページのキャンバスに表示される SDR 受信機の「ウォーターフォール」図を書いています。

キャンバスのサイズは w=1000 h=800 ピクセルです。一番上の行は、サーバーから 50 ミリ秒ごとに配信されます。ブラウザー (javascript を使用) は、すべての行を 1 行下に移動してから、新しい行を先頭に挿入する必要があります。これにより、すべてのピクセルが上から下に移動する滝のような外観になります。

正常に動作していますが、ピクセル移動の CPU 負荷が非常に高く、ラズベリーには高すぎます。

私がやっていることは次のとおりです。

var imagedata = context.getImageData(0,0,pixwidth,height-1);
var dataCopy = new Uint8ClampedArray(imagedata.data);
for(i=(dataCopy.length - (2*pixwidth*4)); i>= 0; i--) {
    dataCopy[i+ pixwidth*4] = dataCopy[i];
}

imagedata.data.set(dataCopy);    
// insert new top line
// ....

context.putImageData(imagedata, 0, 0);

また、imagedata [some index] のピクセル データを直接コピーしようとしましたが、これはほぼ同じパフォーマンスの低下をもたらします。

別の C プログラムでは、非常に高速な単純な memcpy 操作で同じことを行いました。しかし、Javascript で何をすべきでしょうか? 3.200.000 バイトである 800.000 ピクセルがあります。Javascript で可能な限り最高のパフォーマンスでそれらをコピーまたは移動するにはどうすればよいですか?