Фильтры на изображениях теряются при изменении размера холста

Question

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

/******Loading Image in Canvas******/
        let canvas = document.getElementById('demo');
        let ctx = canvas.getContext('2d');
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas.width = 220;
                canvas.height = 250;
                ctx.drawImage(img,0,0,canvas.width,canvas.height);
            }
            img.src = event.target.result;
            self.oldImg = event.target.result;
        }
        reader.readAsDataURL(xevents.target.files[0]);  

Я добавил яркость, контрастную логику и отлично работаю с изображением.Проблема на самом деле возникает, когда я делаю какую-либо операцию с изображением, например, изменяю размер холста (используя jquery UI resizeable).Применяемые фильтры теряются.Ниже приведен фрагмент для перерисовки на холсте при изменении размеров.

    $(".stretch").resizable({ resize: function(event, ui) {
        $("#demo", this).each(function() { 
            $(this).attr({ width: ui.size.width, height: ui.size.height });
            self.reDraw(this);
        });
    } });

reDraw () {
    var img = new Image();
    var canvas = document.getElementById('demo');
    var c = canvas.getContext("2d");
    img.src = this.oldImg;
    c.drawImage(img, 0, 0, canvas.width, canvas.height);
}

Я считаю, что, поскольку он снова создает новый объект изображения (new Image ()), фильтры теряются.Может ли кто-нибудь помочь мне в этом.Я хочу, чтобы фильтры сохранялись при изменении размера холста.

Оценил !!Спасибо

Обновление

process (type, amount) {
    var img = new Image();
    var canvas = document.getElementById('demo');
    var c = canvas.getContext("2d");
    img.src = this.oldImg;
    c.drawImage(img, 0, 0, canvas.width, canvas.height);
    let imgData = c.getImageData(0, 0, canvas.width, canvas.height);
    let data = imgData.data;
    if(type === 'b') {
        for (let i = 0; i < data.length; i += 4) {
            data[i] += amount;
            data[i + 1] += amount;
            data[i + 2] += amount;
        }
    }
    if(type === 'c') {
        amount = (amount/100) + 1;  //convert to decimal & shift range: [0..2]
        let intercept = 128 * (1 - amount);
        for(let i=0;i<data.length;i+=4){   //r,g,b,a
            data[i] = data[i]*amount + intercept;
            data[i+1] = data[i+1]*amount + intercept;
            data[i+2] = data[i+2]*amount + intercept;
        }
    }
    c.putImageData(imgData, 0, 0);
}