Image Frost Filter Application

function processImage(originalImg, intensity = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently for performance with getImageData

    // Ensure a positive integer for intensity; 0 or less means no effect.
    intensity = Math.max(0, Math.floor(intensity));

    // Use naturalWidth/Height to get an image's actual dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // If intensity is 0, no frost effect is applied, return the canvas with the original image.
    if (intensity === 0) {
        return canvas;
    }

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const originalData = imageData.data; // Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Create a new Uint8ClampedArray to store the frosted image data.
    // We read from originalData and write to frostedData to avoid cascading effects
    // if we were to modify originalData in place.
    const frostedData = new Uint8ClampedArray(originalData.length);

    for (let y = 0; y < imgHeight; y++) {
        for (let x = 0; x < imgWidth; x++) {
            const currentPixelIndex = (y * imgWidth + x) * 4;

            // Generate random offsets for pixel displacement.
            // The range of displacement is [-intensity, +intensity].
            const offsetX = Math.floor(Math.random() * (2 * intensity + 1)) - intensity;
            const offsetY = Math.floor(Math.random() * (2 * intensity + 1)) - intensity;

            // Calculate the coordinates of the source pixel to pick from.
            // Clamp the coordinates to be within the image boundaries.
            const sourceX = Math.max(0, Math.min(imgWidth - 1, x + offsetX));
            const sourceY = Math.max(0, Math.min(imgHeight - 1, y + offsetY));

            const sourcePixelIndex = (sourceY * imgWidth + sourceX) * 4;

            // Copy the RGBA values from the randomly picked source pixel
            // to the current pixel in the frostedData array.
            frostedData[currentPixelIndex]     = originalData[sourcePixelIndex];     // Red
            frostedData[currentPixelIndex + 1] = originalData[sourcePixelIndex + 1]; // Green
            frostedData[currentPixelIndex + 2] = originalData[sourcePixelIndex + 2]; // Blue
            frostedData[currentPixelIndex + 3] = originalData[sourcePixelIndex + 3]; // Alpha (transparency)
        }
    }

    // Create a new ImageData object with the frosted pixel data
    const frostedImageData = new ImageData(frostedData, imgWidth, imgHeight);

    // Put the frosted image data back onto the canvas
    ctx.putImageData(frostedImageData, 0, 0);

    return canvas;
}