Image Pixelation Filter

function processImage(originalImg, pixelSize = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // If image has no dimensions (e.g., not loaded or it's a 0x0 image),
    // return an empty canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

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

    // Sanitize the pixelSize parameter.
    // It should be an integer and greater than 0.
    // The default value from the function signature (10) is used if pixelSize is undefined.
    // If pixelSize is provided but is invalid (e.g., a non-numeric string, 0, or a negative number),
    // it will also be reset to the default value of 10.
    let sanitizedPixelSize = parseInt(String(pixelSize), 10);
    if (isNaN(sanitizedPixelSize) || sanitizedPixelSize <= 0) {
        // Fallback to the default value '10' if parsing failed or the value is non-positive.
        // This handles cases like pixelSize="foo", pixelSize=0, pixelSize=-5.
        // If pixelSize was initially undefined, it would already be 10 due to the function's default parameter.
        // This check ensures that any explicit but invalid value also gets reset to a sensible default.
        sanitizedPixelSize = 10;
    }
    const finalPixelSize = sanitizedPixelSize;

    // Calculate the dimensions for the temporary scaled-down version of the image.
    // Using Math.floor ensures integer dimensions for the small intermediate image,
    // which helps in creating sharp, distinct "pixels".
    // Math.max(1, ...) ensures that these dimensions are at least 1, preventing issues with
    // drawImage if finalPixelSize is very large relative to image dimensions.
    const scaledWidth = Math.max(1, Math.floor(imgWidth / finalPixelSize));
    const scaledHeight = Math.max(1, Math.floor(imgHeight / finalPixelSize));

    // Turn off image smoothing to achieve the sharp, blocky pixelated effect.
    // Standard property:
    ctx.imageSmoothingEnabled = false;
    // Vendor-specific properties for older browser compatibility:
    // Check if property exists before setting to avoid potential issues in strict environments
    // or with future browser changes, though direct assignment is usually fine for these.
    if (typeof ctx.mozImageSmoothingEnabled !== 'undefined') {
        ctx.mozImageSmoothingEnabled = false; // Firefox
    }
    if (typeof ctx.webkitImageSmoothingEnabled !== 'undefined') {
        ctx.webkitImageSmoothingEnabled = false; // Chrome, Safari, newer Opera, Edge
    }
    if (typeof ctx.msImageSmoothingEnabled !== 'undefined') {
        ctx.msImageSmoothingEnabled = false; // Internet Explorer, older Edge
    }
    
    // 1. Draw the original image onto the canvas, but scaled down to `scaledWidth` x `scaledHeight`.
    // This step effectively samples the original image into a much smaller grid of pixels.
    // The browser's default downscaling algorithm is used here.
    ctx.drawImage(originalImg, 0, 0, scaledWidth, scaledHeight);

    // 2. Draw the small image (which is currently on the canvas at 0,0 up to scaledWidth,scaledHeight)
    // back onto the same canvas, but scaled up to the original image's full dimensions.
    // Because image smoothing is disabled, the browser uses nearest-neighbor interpolation (or an equivalent algorithm).
    // This process enlarges each pixel from the small version into a large, solid-color block,
    // creating the desired pixelation effect.
    ctx.drawImage(
        canvas, // Source: the canvas itself (containing the small image)
        0, 0, scaledWidth, scaledHeight, // Source rectangle (sx, sy, sWidth, sHeight)
        0, 0, imgWidth, imgHeight         // Destination rectangle (dx, dy, dWidth, dHeight)
    );

    return canvas;
}