Наложение canvas

Имеется JS создающий эффект белого шума.

let canvas = document.getElementById('noisy-canvas'),
    ctx = canvas.getContext('2d');
function main() {
    window.addEventListener('resize', updateCanvasSize);
    updateCanvasSize();
    render();
}
function getRandom() {
    return Math.random() * 255;
}
function render() {
    let imageData = ctx.createImageData(ctx.canvas.width, ctx.canvas.height);
    for (let i = 0; i < imageData.data.length; i += 4) {
        const color = getRandom();
        imageData.data[i]     = color;
        imageData.data[i + 1] = color;
        imageData.data[i + 2] = color;
        imageData.data[i + 3] = 255;
    }
    ctx.putImageData(imageData, 0, 0);
    requestAnimationFrame(render);
}
function updateCanvasSize() {
    ctx.canvas.height = canvas.offsetHeight;
    ctx.canvas.width  = canvas.offsetWidth;
}
main();

Далее этот шум накладывается на изображение.

 <div class="col-6">
            <div class="noisy-bg parallax-window" data-parallax="scroll" data-image-src="/images/image1.jpg" >
                <canvas id="noisy-canvas"></canvas>
            </div>
  </div>

CSS

#noisy-canvas {
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

.noisy-bg {
    background-image: url(/images/image.jpg);
    height: 800px;
    padding: 0px;
}

.parallax-window {
    min-height: 400px;
    background: transparent;
}

При попытке наложить такой же эффект к другому изображению, ничего не выходит. Какие варианты стоит рассмотреть чтобы применять этот же эффект для других картинок?