Image Triple Exposure Filter

function processImage(originalImg, blendMode = 'screen', opacity = 0.5) {
    // Use naturalWidth/Height for the true dimensions of the image if available (for HTMLImageElement).
    // Fallback to width/height for other sources like HTMLCanvasElement or if natural dimensions aren't set.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        console.error("Image has no dimensions or is not loaded properly. Cannot process.");
        // Create and return a minimal, typically 1x1, canvas to avoid breaking caller expecting a canvas.
        // Fill with a noticeable color (e.g., magenta) to indicate an issue if displayed.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 1;
        errorCanvas.height = 1;
        const errorCtx = errorCanvas.getContext('2d');
        if (errorCtx) {
            errorCtx.fillStyle = 'magenta'; 
            errorCtx.fillRect(0, 0, 1, 1);
        }
        return errorCanvas;
    }

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

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        // This should ideally not happen in a standard browser environment with a valid canvas element.
        console.error("Could not get 2D rendering context.");
        // Return the created canvas, though it will be blank.
        return canvas;
    }

    // Ensure opacity is within the valid range [0, 1] as expected by globalAlpha.
    // While globalAlpha itself clamps values, explicit clamping is good practice.
    const clampedOpacity = Math.max(0, Math.min(1, opacity));

    // Layer 1: Draw the original image as the base layer.
    // Default globalAlpha is 1.0 and globalCompositeOperation is 'source-over'.
    // Explicitly set here for clarity and to ensure these defaults if context was previously modified.
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Layer 2: Apply the second exposure.
    // Set the specified opacity and blend mode for this layer.
    ctx.globalAlpha = clampedOpacity;
    // A list of valid globalCompositeOperation values can be found at:
    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
    // If an invalid blendMode string is provided, the browser will typically ignore it
    // and either use 'source-over' or retain the last validly set operation.
    ctx.globalCompositeOperation = blendMode;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Layer 3: Apply the third exposure.
    // The globalAlpha and globalCompositeOperation settings from Layer 2 are still active.
    // So, drawing the image again will apply the same blending effect with the same opacity
    // on top of the combined result of Layer 1 and Layer 2.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // It's good practice to reset context properties to their defaults after custom operations,
    // especially if the canvas context might be reused elsewhere.
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}