static noise with javascript

noise.html

<canvas width="854" height="480"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(canvas.width, canvas.height);
let offsetY = 0;

// draw like a scanner
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, "rgba(0,0,0,0.6)");
gradient.addColorStop(0.1, "rgba(0,0,0,0.6)");
gradient.addColorStop(0.1, "rgba(255,255,255,0.3)");
gradient.addColorStop(0.3, "rgba(255,255,255,0.1)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
ctx.fillStyle = gradient;
ctx.translate(0, -canvas.height);

let lastFrameTime = 0;
const makeNoise = elapsedTime => {
    // 30fps --
    const delta = elapsedTime - (lastFrameTime || 0);
    requestAnimationFrame(makeNoise);
    if (lastFrameTime && delta < 33) {
        return;
    }
    // -- 30fps

    // fill with noise
    const buff = new Uint8ClampedArray(8000).fill(255);
    for (let i = 0; i < buff.length; i += 4) {
        buff.fill(Math.random() * 80, i, i + 3);
    }

    const limit = (imageData.data.length - buff.length) / 4;
    for (let i = 0; i < limit; i += (Math.random() * buff.length) / 2) {
        imageData.data.set(buff, Math.floor(i) * 4);
    }

    ctx.putImageData(imageData, 0, 0);
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (offsetY > canvas.height * 2) {
        ctx.translate(0, -canvas.height * 2);
        offsetY = 0;
    }

    offsetY += 4;
    ctx.translate(0, 4);

    lastFrameTime = elapsedTime;
};

requestAnimationFrame(makeNoise);
</script>