Photo Vintage Mood Filter

function processImage(originalImg, sepiaAmount = 0.8, saturationAmount = 0.5, contrastAmount = 1.2, brightnessAmount = 0.95) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions.
    // It's crucial that originalImg is loaded for naturalWidth/naturalHeight to be correct.
    // If originalImg is not loaded or fails to load, naturalWidth/naturalHeight might be 0,
    // resulting in a 0x0 canvas. This function assumes a loaded image.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Build the filter string.
    // The order of filters in the string determines their application order.
    // We will apply them in a common photo-editing order for intuitive results:
    // 1. Brightness
    // 2. Contrast
    // 3. Saturation
    // 4. Sepia
    // This order provides a generally balanced way to adjust tone and color.
    
    let filters = [];

    // Note: CSS filter values are numbers or percentages.
    // Default values are numbers. String inputs for these numeric values (e.g., "0.8")
    // will also work correctly when interpolated into the filter string.
    // The comparisons (e.g., brightnessAmount != 1) use type coercion, so "1" == 1 is true.

    if (brightnessAmount != 1) { // brightness(1) or brightness(100%) is no change
        filters.push(`brightness(${brightnessAmount})`);
    }
    if (contrastAmount != 1) { // contrast(1) or contrast(100%) is no change
        filters.push(`contrast(${contrastAmount})`);
    }
    if (saturationAmount != 1) { // saturate(1) or saturate(100%) is no change
        filters.push(`saturate(${saturationAmount})`);
    }
    if (sepiaAmount != 0) { // sepia(0) or sepia(0%) is no sepia effect
        filters.push(`sepia(${sepiaAmount})`);
    }
    
    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

    // Draw the image onto the canvas.
    // The accumulated filter (if any) will be applied during this drawing operation.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // The canvas, now containing the filtered image, is returned.
    return canvas;
}