Image Glow Effect Enhancer

/**
 * Adds a glow effect to an image.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {string} [glowColor='#ffffff'] The color of the glow (e.g., '#ff0000', 'rgb(255,0,0)').
 * @param {number} [glowRange=5] The intensity of the glow. Higher numbers result in a more intense, solid glow.
 * @param {number} [glowOpacity=1] The opacity of the glow, from 0 (transparent) to 1 (opaque).
 * @param {number} [glowBlur=20] The blur radius of the glow. Higher numbers create a softer, more spread-out glow.
 * @returns {HTMLCanvasElement} A new canvas element with the glow effect applied.
 */
function processImage(originalImg, glowColor = '#ffffff', glowRange = 5, glowOpacity = 1, glowBlur = 20) {
    // Coerce parameters to their expected types
    glowRange = Number(glowRange) || 5;
    glowOpacity = Number(glowOpacity) || 1;
    glowBlur = Number(glowBlur) || 20;

    // The glow can extend beyond the original image dimensions, so we need padding.
    // A padding of glowBlur * 2 is a safe margin to avoid clipping the glow effect.
    const padding = glowBlur * 2;
    
    // Create the final canvas that will be returned
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.width + padding;
    canvas.height = originalImg.height + padding;

    // The position to draw the image, centered within the padded canvas
    const drawX = padding / 2;
    const drawY = padding / 2;
    
    // Create an offscreen canvas to generate the silhouette for the glow
    const offscreenCanvas = document.createElement('canvas');
    const offscreenCtx = offscreenCanvas.getContext('2d', { willReadFrequently: true });
    offscreenCanvas.width = canvas.width;
    offscreenCanvas.height = canvas.height;

    // 1. Draw the original image onto the offscreen canvas
    offscreenCtx.drawImage(originalImg, drawX, drawY);

    // 2. Create a silhouette of the image using the glow color.
    // 'source-in' composite operation means we fill the canvas with glowColor,
    // but only where the source image (originalImg) was opaque.
    offscreenCtx.globalCompositeOperation = 'source-in';
    offscreenCtx.fillStyle = glowColor;
    offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);

    // 3. Draw the glow onto the main canvas
    // Apply the blur filter and opacity. The glow is essentially a blurred version of the silhouette.
    ctx.globalAlpha = glowOpacity;
    ctx.filter = `blur(${glowBlur}px)`;

    // Drawing the silhouette multiple times (controlled by glowRange) makes the glow more intense and solid.
    for (let i = 0; i < glowRange; i++) {
        ctx.drawImage(offscreenCanvas, 0, 0);
    }
    
    // 4. Reset filters and draw the original image on top of the glow
    ctx.globalAlpha = 1;
    ctx.filter = 'none';
    ctx.drawImage(originalImg, drawX, drawY);

    // 5. Return the final canvas with the complete effect
    return canvas;
}