javascript - 再描画せずにビューポートをシフトする

Question

コードのパフォーマンスを向上させるために、ビューが画面全体にパンするときにビューポート内のすべてのオブジェクトを再描画しないようにしています。私の解決策は、 getImageData() および putImageData() メソッドを使用して、既に描画されているものをシフトすることでした。すべてを再描画したいのですが、フレーム レートが 1,000 から 23 に急落します。私が絶対にやりたくないのは、ゲームの「ウィンドウ」をゲーム内の 25 マスに強制的に下げることです。これを達成するためのより速い方法はありますか？

function ViewPort() {
    .
    .
    .
    this.ReconcileViewPort = function() {
        .
        .
        .
        if (!(this.previousCenter.x == this.center.x && this.previousCenter.y == this.center.y)) {
            // shift the images on the canvases
            var data = canvasLayer0.getImageData(0, 0, canvasRaw.width, canvasRaw.height - this.bottomRibbonHeight);
            canvasLayer0.putImageData(data, this.previousCenter.x - this.center.x, this.previousCenter.y - this.center.y);

            data = canvasLayer1.getImageData(0, 0, canvasRaw.width, canvasRaw.height - this.bottomRibbonHeight);
            canvasLayer1.putImageData(data, this.previousCenter.x - this.center.x, this.previousCenter.y - this.center.y);

            data = canvasLayer2.getImageData(0, 0, canvasRaw.width, canvasRaw.height - this.bottomRibbonHeight);
            canvasLayer2.putImageData(data, this.previousCenter.x - this.center.x, this.previousCenter.y - this.center.y);

            data = canvasLayer3.getImageData(0, 0, canvasRaw.width, canvasRaw.height - this.bottomRibbonHeight);
            canvasLayer3.putImageData(data, this.previousCenter.x - this.center.x, this.previousCenter.y - this.center.y);

            // get ready to detect any movements
            this.previousCenter.x = this.center.x;
            this.previousCenter.y = this.center.y;
        }
    }
}