Как перерисовать измененное изображение, используя холст

Question

позвольте мне объяснить вам, что я делаю. Мне нужно нарисовать изображение bigg около 5000px до 2688px. Поэтому я не могу нарисовать изображение целиком, потому что в браузере оно слишком длинное. Я решил добавить полосу прокрутки, чтобы увидеть все изображение. Следующий скрипт позволяет мне нарисовать часть холста

var img = new Image();
     img.onload = function(){
          canvasW = 5376
          canvasH = 2688
          ctx.drawImage(img, 0,0, canvasW, canvasH);
     };
img.src = "image.png";

Теперь представьте, что я хочу применить эффекты, такие как размытие или яркость, контраст и т. Д. Мой холст изменится, поэтому как я могу перерисовать измененный холст (с эффектом, а не с первым.

Я пытался проверить на stackoverflow, но в примерах это перерисовать изображение с первого Я имею в виду рисунок не из модифицированного холста.

Я попытался сохранить base64 моего холста и перерисовать с помощью base64:

var image = new Image()

    image.addEventListener('load', function() {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.drawImage(image, canMouseX, canMouseY, canvasW, canvasH);

})

image.src = bases64[bases64.length - 1]

Это не работает, потому что при хранении base64 остается только часть canvas, которая перерисовывается. Если вы хотите получить более подробную информацию, клонируйте мой репо: https://github.com/wyllisMonteiro/draggingScroll/tree/master

Я хочу найти решение для перерисовки измененного холста