Image Pixel Art Filter

function processImage(originalImg, pixelSize = 10) {
    // Get the natural dimensions of the original image
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // Sanitize pixelSize: ensure it's a positive number.
    // If pixelSize is 1, the effect will be minimal (closest to original).
    if (pixelSize <= 0) {
        pixelSize = 1;
    }

    // Create the output canvas with the same dimensions as the original image
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = originalWidth;
    outputCanvas.height = originalHeight;
    const outputCtx = outputCanvas.getContext('2d');

    // Handle cases where the original image has zero dimensions (e.g., not loaded or invalid)
    // In such cases, a 0x0 canvas will be returned, which is technically correct.
    if (originalWidth === 0 || originalHeight === 0) {
        return outputCanvas; // Return the 0x0 canvas
    }

    // Calculate the dimensions for the temporary canvas (the downscaled version).
    // Ensure dimensions are at least 1x1 to prevent errors with 0-dimension canvases.
    const tempWidth = Math.max(1, Math.floor(originalWidth / pixelSize));
    const tempHeight = Math.max(1, Math.floor(originalHeight / pixelSize));

    // Create a temporary canvas for downscaling the image.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = tempWidth;
    tempCanvas.height = tempHeight;
    const tempCtx = tempCanvas.getContext('2d');

    // Draw the original image onto the temporary canvas, scaling it down.
    // The browser's default scaling (e.g., bilinear interpolation) will average nearby pixel colors,
    // which is suitable for determining the color of each larger "pixel" block.
    tempCtx.drawImage(originalImg, 0, 0, tempWidth, tempHeight);

    // Disable image smoothing on the output canvas.
    // This is crucial for creating the sharp, blocky "pixelated" look when scaling up.
    outputCtx.imageSmoothingEnabled = false;
    // For broader browser compatibility, also set vendor-prefixed properties.
    // These are generally safe to set even if not supported; modern browsers use `imageSmoothingEnabled`.
    outputCtx.mozImageSmoothingEnabled = false;   // Firefox
    outputCtx.webkitImageSmoothingEnabled = false; // WebKit (Safari, older Chrome/Opera)
    outputCtx.msImageSmoothingEnabled = false;    // IE, Edge (older versions)

    // Draw the image from the temporary (small, pixelated) canvas onto the main output canvas.
    // This scales the downsampled image back up to the original dimensions.
    // Because image smoothing is disabled, the result is a pixelated effect.
    outputCtx.drawImage(tempCanvas, 0, 0, tempWidth, tempHeight, 0, 0, originalWidth, originalHeight);

    return outputCanvas;
}