Image From The Last Arrow Of Cupid

/**
 * Applies a romantic, dreamy, and focused effect to an image,
 * inspired by the theme "The Last Arrow of Cupid". This creates a
 * look as if the image has been magically struck by love's arrow.
 *
 * @param {HTMLImageElement} originalImg The original image object.
 * @param {string} [tintColor='#E63946'] The color for the romantic tint. A love-like red or pink is recommended.
 * @param {number} [tintIntensity=0.25] The intensity of the color tint (a value from 0 to 1).
 * @param {number} [vignetteStrength=0.7] The strength of the vignette effect, which darkens the corners to create focus (a value from 0 to 1).
 * @param {number} [glowIntensity=0.4] The intensity of the dreamy glow/soft focus effect (a value from 0 to 1).
 * @param {number} [arrowX=0.5] The horizontal position of the "arrow's impact" (focal point) as a fraction of image width (a value from 0 to 1).
 * @param {number} [arrowY=0.5] The vertical position of the "arrow's impact" (focal point) as a fraction of image height (a value from 0 to 1).
 * @returns {HTMLCanvasElement} A new canvas element with the filter applied.
 */
function processImage(originalImg, tintColor = '#E63946', tintIntensity = 0.25, vignetteStrength = 0.7, glowIntensity = 0.4, arrowX = 0.5, arrowY = 0.5) {
    // Parameter sanitization and clamping to valid ranges
    const cleanTintColor = typeof tintColor === 'string' ? tintColor : '#E63946';
    const cleanTintIntensity = Math.max(0, Math.min(1, Number(tintIntensity)));
    const cleanVignetteStrength = Math.max(0, Math.min(1, Number(vignetteStrength)));
    const cleanGlowIntensity = Math.max(0, Math.min(1, Number(glowIntensity)));
    const cleanArrowX = Math.max(0, Math.min(1, Number(arrowX)));
    const cleanArrowY = Math.max(0, Math.min(1, Number(arrowY)));

    // 1. Create a canvas with the same dimensions as the original image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 2. Draw the original image as the base layer
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 3. Apply a romantic color tint using 'overlay' for a rich blend
    if (cleanTintIntensity > 0) {
        ctx.globalCompositeOperation = 'overlay';
        ctx.fillStyle = cleanTintColor;
        ctx.globalAlpha = cleanTintIntensity;
        ctx.fillRect(0, 0, w, h);
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
    }

    // 4. Add a dreamy glow effect
    if (cleanGlowIntensity > 0) {
        // This effect composites the tinted image over itself with a blur
        // and 'screen' blend mode to create a soft, ethereal glow.
        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = cleanGlowIntensity;
        const blurAmount = cleanGlowIntensity * 10;
        ctx.filter = `blur(${blurAmount}px) brightness(1.1)`;
        ctx.drawImage(canvas, 0, 0); // Draw the canvas's current state onto itself

        // Reset context properties for the next steps
        ctx.filter = 'none';
        ctx.globalAlpha = 1.0;
        ctx.globalCompositeOperation = 'source-over';
    }

    // Define the focal point for the vignette and flare from parameters
    const centerX = w * cleanArrowX;
    const centerY = h * cleanArrowY;

    // 5. Add a vignette to draw focus to the "arrow's impact"
    if (cleanVignetteStrength > 0) {
        const outerRadius = Math.sqrt(w * w + h * h) / 2;
        // The inner radius of the clear area shrinks as vignetteStrength increases
        const innerRadius = outerRadius * (1 - cleanVignetteStrength);

        const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${0.85 * cleanVignetteStrength})`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // 6. Add a subtle flare at the focal point, representing the magic of Cupid's arrow
    // This is applied on top of the vignette to make it pop.
    if (cleanGlowIntensity > 0) {
        const flareRadius = Math.min(w, h) * 0.15;
        const flareGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, flareRadius);
        // Tie flare brightness to the glow intensity for a cohesive look
        flareGradient.addColorStop(0, `rgba(255, 255, 230, ${0.7 * (cleanGlowIntensity + 0.1)})`);
        flareGradient.addColorStop(0.3, `rgba(255, 220, 220, ${0.3 * (cleanGlowIntensity + 0.1)})`);
        flareGradient.addColorStop(1, 'rgba(255, 255, 230, 0)');

        ctx.globalCompositeOperation = 'lighter'; // Use 'lighter' for a bright, magical effect
        ctx.fillStyle = flareGradient;
        ctx.fillRect(0, 0, w, h);

        // Reset composite operation
        ctx.globalCompositeOperation = 'source-over';
    }

    // 7. Return the final canvas element
    return canvas;
}