Joyful Photo Filter Application

function processImage(originalImg, brightness = 1.2, contrast = 1.1, saturation = 1.3, warmthAlpha = 0.1) {
    // Ensure the original image is loaded and valid
    // The `naturalWidth` and `naturalHeight` properties are 0 if the image is not loaded or is invalid.
    if (!originalImg || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Joyful Photo Filter: Original image is not loaded or invalid.");
        // Return a small, empty canvas as a fallback.
        // This helps in environments where a canvas element is expected.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 1; // Use 1x1 to avoid issues with 0x0 dimensions
        errorCanvas.height = 1;
        const errorCtx = errorCanvas.getContext('2d');
        if (errorCtx) {
            // Optionally fill with a color to indicate it's a placeholder/error state
            errorCtx.fillStyle = 'lightgray'; 
            errorCtx.fillRect(0, 0, 1, 1);
        }
        return errorCanvas;
    }

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

    // It's highly unlikely getContext('2d') would fail in modern browsers for a new canvas,
    // but defensive checking is good practice.
    if (!ctx) {
        console.error("Joyful Photo Filter: Could not get 2D rendering context.");
        // Return the canvas as is (it will be blank) or the error canvas from above logic
        // For consistency, let's ensure dimensions if we return this unadorned canvas.
        canvas.width = originalImg.naturalWidth || 1; // Fallback to 1 if naturalWidth somehow became 0 post-check
        canvas.height = originalImg.naturalHeight || 1;
        return canvas;
    }

    // Set canvas dimensions to the original image's dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Apply brightness, contrast, and saturation filters
    // These values are multipliers: 1.0 means no change.
    // e.g., brightness = 1.2 means 20% brighter.
    // e.g., contrast = 1.1 means 10% more contrast.
    // e.g., saturation = 1.3 means 30% more saturated.
    const filterString = `brightness(${brightness}) contrast(${contrast}) saturate(${saturation})`;
    ctx.filter = filterString;

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

    // Reset the filter. This ensures that subsequent drawing operations (like the warmth overlay)
    // are not affected by the brightness/contrast/saturation adjustments.
    ctx.filter = 'none';

    // Apply a warmth overlay if warmthAlpha is positive and valid.
    // warmthAlpha typically ranges from 0.0 (no warmth) to around 0.2-0.3 for a noticeable effect.
    // A value of 0.1 provides a subtle warmth.
    if (warmthAlpha > 0 && warmthAlpha <= 1) {
        // Set the global alpha for the transparency of the warmth layer.
        ctx.globalAlpha = warmthAlpha;
        
        // Choose a warm color. A light, warm orange or yellow works well.
        // 'rgb(255, 200, 50)' is a pleasant warm orange-yellow.
        ctx.fillStyle = 'rgb(255, 200, 50)'; 
        
        // Fill the entire canvas with the semi-transparent warm color.
        // This layer is drawn on top of the already filtered image.
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Reset global alpha to its default value (1.0) for any further drawing,
        // though not strictly necessary here as it's the last operation.
        ctx.globalAlpha = 1.0;
    }

    return canvas;
}