Image Downscaling Tool

function processImage(originalImg, maxWidthArg = 800, maxHeightArg = 800) {
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    let MWidth = Number(maxWidthArg);
    let MHeight = Number(maxHeightArg);

    // If Number(arg) results in NaN (e.g., from a non-numeric string) or the value is non-positive,
    // fall back to a sensible default (e.g., the initial default of 800).
    // The default parameter values (e.g., `maxWidthArg = 800`) only apply if the argument is `undefined`.
    if (isNaN(MWidth) || MWidth <= 0) {
        MWidth = 800; // Fallback to default width if an invalid value was passed
    }
    if (isNaN(MHeight) || MHeight <= 0) {
        MHeight = 800; // Fallback to default height if an invalid value was passed
    }
    
    // Ensure target dimensions are at least 1 pixel for canvas validity.
    MWidth = Math.max(1, MWidth);
    MHeight = Math.max(1, MHeight);

    // Handle cases where the original image might not be loaded or has zero dimensions.
    if (originalWidth === 0 || originalHeight === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1; // Return a minimal 1x1 canvas
        emptyCanvas.height = 1;
        // Optionally, you could fill it with a specific color or leave it transparent.
        // For example: const ctx = emptyCanvas.getContext('2d'); ctx.fillStyle = 'grey'; ctx.fillRect(0,0,1,1);
        return emptyCanvas;
    }

    // Calculate aspect ratios to fit within MWidth and MHeight
    const widthRatio = MWidth / originalWidth;
    const heightRatio = MHeight / originalHeight;

    // Determine the correct scale factor.
    // Math.min(1, ...) ensures we only downscale (factor <= 1).
    // Math.min(widthRatio, heightRatio) ensures the image fits both dimensions while maintaining aspect ratio.
    const scaleFactor = Math.min(1, widthRatio, heightRatio);

    // Calculate new dimensions, rounded to the nearest whole number.
    let newWidth = Math.round(originalWidth * scaleFactor);
    let newHeight = Math.round(originalHeight * scaleFactor);

    // Ensure final dimensions are at least 1x1.
    // This is important if scaleFactor is extremely small, potentially rounding to 0.
    newWidth = Math.max(1, newWidth);
    newHeight = Math.max(1, newHeight);

    const canvas = document.createElement('canvas');
    canvas.width = newWidth;
    canvas.height = newHeight;

    const ctx = canvas.getContext('2d');

    // Set image smoothing options for potentially better quality when downscaling.
    // The 'high' quality setting is preferred if available.
    if (ctx.imageSmoothingQuality !== undefined) {
        ctx.imageSmoothingQuality = 'high';
    }
    // Ensure image smoothing is enabled (it usually is by default).
    ctx.imageSmoothingEnabled = true;

    // Draw the original image onto the canvas, scaled to the new dimensions.
    ctx.drawImage(originalImg, 0, 0, newWidth, newHeight);

    return canvas;
}