Image To Pixel-Style Converter

/**
 * Converts an image to a pixel-style (pixelated) image.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} pixelSize The size of the "pixel" blocks. A larger value results in more pixelation.
 * @returns {HTMLCanvasElement} A canvas element with the pixelated image.
 */
function processImage(originalImg, pixelSize = 10) {
    // Ensure pixelSize is a positive integer to avoid errors.
    const effectivePixelSize = Math.max(1, Math.floor(pixelSize));

    // Get original image dimensions.
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // Create the final canvas that will be returned.
    const canvas = document.createElement('canvas');
    canvas.width = originalWidth;
    canvas.height = originalHeight;
    const ctx = canvas.getContext('2d');
    
    // Calculate the dimensions of the temporary small canvas.
    const tempWidth = Math.ceil(originalWidth / effectivePixelSize);
    const tempHeight = Math.ceil(originalHeight / effectivePixelSize);

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

    // Draw the original image onto the small canvas. This effectively samples the image.
    tempCtx.drawImage(originalImg, 0, 0, tempWidth, tempHeight);

    // Disable image smoothing on the final canvas to get the sharp, blocky pixel effect.
    ctx.imageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;      // For Firefox
    ctx.webkitImageSmoothingEnabled = false;   // For Chrome, Safari, and newer Opera
    ctx.msImageSmoothingEnabled = false;       // For Internet Explorer

    // Draw the small, sampled image from the temporary canvas onto the final canvas,
    // scaling it up. The disabled smoothing will use "nearest neighbor" interpolation.
    ctx.drawImage(tempCanvas, 0, 0, tempWidth, tempHeight, 0, 0, originalWidth, originalHeight);

    return canvas;
}