Image Neon Glow Filter

function processImage(
    originalImg,
    glowColor = "#00FFFF", // Color of the main neon glow
    glowRadius = 10,      // Base radius for the glow effect (pixels)
    coreBrightness = 1.5, // Brightness factor for the "hot" core of the neon tube (e.g., 1.5 = 150%)
    coreColor = "white",    // Color of the "hot" core (typically white or a very light version of glowColor)
    sourceMode = "alpha",   // How to determine what parts of the image glow:
                            // "alpha": Uses the image's existing alpha channel (transparency). Good for logos/text with transparency.
                            // "luminance": Creates a mask based on image brightness. Good for photos or images without transparency.
    luminanceThreshold = 128 // Threshold (0-255) for luminance mode. Pixels brighter than this will glow.
) {
    // Parameter sanitization
    glowRadius = Math.max(1, Number(glowRadius));
    coreBrightness = Math.max(0.1, Number(coreBrightness)); // Can be <1 to dim, but usually >=1
    luminanceThreshold = Math.max(0, Math.min(255, Number(luminanceThreshold)));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Ensure originalImg is loaded, though the problem states it's an Image object (implies loaded)
    // For robustness, one might check originalImg.complete
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        // Return an empty canvas or handle error if image is not loaded or has no dimensions
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    let sourceToDraw = originalImg;

    if (sourceMode === "luminance") {
        const maskCanvas = document.createElement('canvas');
        maskCanvas.width = imgWidth;
        maskCanvas.height = imgHeight;
        const mCtx = maskCanvas.getContext('2d');
        
        mCtx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        
        const imageData = mCtx.getImageData(0, 0, imgWidth, imgHeight);
        const data = imageData.data;
        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            
            // ITU-R BT.709 luminance formula: L = 0.2126*R + 0.7152*G + 0.0722*B
            const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
            
            if (luminance >= luminanceThreshold) {
                // Make parts that meet threshold white and fully opaque (to form the glowing shape)
                data[i] = 255;     // R
                data[i + 1] = 255; // G
                data[i + 2] = 255; // B
                data[i + 3] = 255; // Alpha
            } else {
                // Make other parts transparent black
                data[i] = 0;       // R
                data[i + 1] = 0;   // G
                data[i + 2] = 0;   // B
                data[i + 3] = 0;   // Alpha
            }
        }
        mCtx.putImageData(imageData, 0, 0);
        sourceToDraw = maskCanvas; // This mask (white shapes on transparent) will be used for glowing
    }

    // 1. Fill background (typically black for neon effects to make glows stand out)
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, imgWidth, imgHeight);

    // Use 'lighter' globalCompositeOperation for additive blending of glows.
    // This makes overlapping glows brighter.
    ctx.globalCompositeOperation = 'lighter';

    // Layer 1: Outer, diffuse glow (main glowColor)
    // Applying multiple drop-shadow filters with decreasing radius/opacity can create a smoother falloff.
    // The syntax `drop-shadow(offset-x offset-y blur-radius color)` is used.
    ctx.filter = `
        drop-shadow(0 0 ${glowRadius * 0.75}px ${glowColor})
        drop-shadow(0 0 ${glowRadius * 0.5}px ${glowColor})
        drop-shadow(0 0 ${glowRadius * 0.25}px ${glowColor})
    `;
    // Draw the source image (or its luminance mask). The filter applies the shadow.
    // If sourceToDraw has color (e.g. red circle from originalImg in "alpha" mode), that color is drawn.
    // If sourceToDraw is the white mask (from "luminance" mode), white is drawn.
    ctx.drawImage(sourceToDraw, 0, 0, imgWidth, imgHeight);
    ctx.filter = 'none'; // Reset filter for the next layer

    // Layer 2: Brighter core "line" or inner glow (using coreColor)
    // This simulates the "hot" center of the neon tube.
    // The brightness() filter increases the intensity of the source image itself.
    // The drop-shadow here is tighter and uses coreColor (e.g., white).
    ctx.filter = `
        brightness(${coreBrightness})
        drop-shadow(0 0 ${glowRadius * 0.15}px ${coreColor})
        drop-shadow(0 0 ${glowRadius * 0.1}px ${coreColor})
    `;
    // Draw the source again. It will be brightened, and will have the coreColor glow.
    // Due to 'lighter' compositing, this brightened image and its core glow add to the previous layer.
    ctx.drawImage(sourceToDraw, 0, 0, imgWidth, imgHeight);
    ctx.filter = 'none'; // Reset filter

    // Reset globalCompositeOperation to default for any subsequent drawing if needed elsewhere.
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}