Image Concert Lighting Filter Effect Tool

function processImage(
    originalImg,
    color1 = "rgba(255,0,255,0.4)", // Primary light color, e.g., "rgba(R,G,B,A)"
    color2 = "rgba(0,0,0,0)",      // Color to fade to for gradients (e.g., transparent for a spotlight effect)
    blendMode = "color-dodge",     // Canvas globalCompositeOperation, e.g., "screen", "overlay", "lighter"
    gradientType = "radial",       // Type of light: "none" (full overlay), "radial" (spotlight), "linear" (beam)
    lightX = 0.5,                  // Normalized X position (0.0 to 1.0) for light source/center
    lightY = 0.5,                  // Normalized Y position (0.0 to 1.0) for light source/center
    intensity = 0.7,               // Controls the spread/size of the light (0.0 to 1.0)
    angle = 45                     // Angle in degrees (0-360) for linear gradient direction
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Basic validation for image dimensions
    if (w === 0 || h === 0) {
        console.error("Image has zero width or height. Ensure the image is loaded correctly.");
        // Return a small, empty canvas or handle as an error state
        canvas.width = 1; 
        canvas.height = 1;
        return canvas;
    }

    canvas.width = w;
    canvas.height = h;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Set the blend mode for the lighting effect
    ctx.globalCompositeOperation = blendMode;

    // Calculate actual pixel coordinates for the light source
    const actualX = lightX * w;
    const actualY = lightY * h;

    // Clamp intensity to the range [0, 1] to ensure predictable behavior
    const clampedIntensity = Math.max(0, Math.min(1, intensity));

    if (gradientType === "none") {
        // Apply a full overlay of color1
        ctx.fillStyle = color1;
        ctx.fillRect(0, 0, w, h);
    } else if (gradientType === "radial") {
        const innerRadius = 0; // Light originates from a point source

        // Base radius for calculation: largest dimension of the canvas
        // This allows the light to potentially cover the entire image at full intensity
        const baseRadius = Math.max(w, h); 
        let outerRadius = baseRadius * clampedIntensity;
        
        // Ensure outerRadius is always greater than innerRadius for a valid gradient
        // A very small intensity should still produce a tiny, visible light spot.
        if (outerRadius <= innerRadius) { 
            outerRadius = innerRadius + 0.1; // Smallest drawable gradient radius
        }

        const gradient = ctx.createRadialGradient(actualX, actualY, innerRadius, actualX, actualY, outerRadius);
        gradient.addColorStop(0, color1); // Light color at the center
        gradient.addColorStop(1, color2); // Fades to this color at the outer radius

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h); // Apply the radial gradient to the entire canvas
    } else if (gradientType === "linear") {
        // Max possible length for a linear gradient is the canvas diagonal
        const maxGradientLength = Math.sqrt(w*w + h*h);
        let gradientLength = maxGradientLength * clampedIntensity;

        // Ensure the gradient has some length to be drawable
        if (gradientLength <= 0) { 
            gradientLength = 0.1; // Minimal length
        }

        // Normalize angle to [0, 360) and convert to radians
        const normalizedAngle = ((angle % 360) + 360) % 360; 
        const angleRad = normalizedAngle * Math.PI / 180;

        const x0 = actualX; // Start point of the linear gradient
        const y0 = actualY;
        // Calculate end point based on angle and length
        const x1 = actualX + Math.cos(angleRad) * gradientLength;
        const y1 = actualY + Math.sin(angleRad) * gradientLength;

        const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
        gradient.addColorStop(0, color1); // Light source color at (x0,y0)
        gradient.addColorStop(1, color2); // Fades to this color towards (x1,y1)

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h); // Apply the linear gradient to the entire canvas
    }

    // Reset composite operation to default for any subsequent drawing on this context (if any)
    ctx.globalCompositeOperation = "source-over";

    return canvas;
}