Image Red Aura Effect Creator

/**
 * Adds an effect that looks like a red aura or power floating from the subject of the image.
 * This effect works best on images with a transparent background (like PNGs).
 * For images without transparency, the aura will form around the rectangular border of the image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} auraColor The color of the aura. Any valid CSS color format is acceptable (e.g., 'red', '#ff0000', 'rgb(255,0,0)'). Defaults to 'red'.
 * @param {number} auraIntensity An integer controlling the brightness and density of the aura. Recommended range: 1 to 10. Defaults to 5.
 * @param {number} auraSpread A number indicating how far the aura should spread out from the subject in pixels. Defaults to 15.
 * @returns {HTMLCanvasElement} A new canvas element displaying the image with the red aura effect.
 */
function processImage(originalImg, auraColor = 'red', auraIntensity = 5, auraSpread = 15) {
    // Sanitize parameters to ensure they are valid and within a reasonable range.
    const intensity = Math.max(1, Math.min(parseInt(auraIntensity, 10) || 5, 20));
    const spread = Math.max(0, parseFloat(auraSpread) || 15);
    const color = typeof auraColor === 'string' ? auraColor : 'red';

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

    // Create the final canvas which will be returned.
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = w;
    finalCanvas.height = h;
    const finalCtx = finalCanvas.getContext('2d');

    // To robustly create the glow without affecting the original image rendering,
    // we use an intermediate off-screen canvas to generate the aura.
    const glowCanvas = document.createElement('canvas');
    glowCanvas.width = w;
    glowCanvas.height = h;
    const glowCtx = glowCanvas.getContext('2d');

    // The core of the effect is the CSS `drop-shadow` filter.
    // By repeating the filter multiple times, we can intensify the glow.
    const shadowString = `drop-shadow(0 0 ${spread}px ${color})`;
    glowCtx.filter = Array(intensity).fill(shadowString).join(' ');

    // 1. Draw the image onto the intermediate canvas.
    // The applied filter will transform the image's silhouette into a colored, blurred glow.
    glowCtx.drawImage(originalImg, 0, 0, w, h);

    // 2. Draw the generated glow from the intermediate canvas onto our final canvas.
    // This forms the background layer of the effect.
    finalCtx.drawImage(glowCanvas, 0, 0, w, h);

    // 3. Draw the original, crisp image on top of the glow.
    finalCtx.drawImage(originalImg, 0, 0, w, h);

    return finalCanvas;
}