Image Aura Effect Creator With Red Color

/**
 * Creates a glowing aura effect around an image.
 * This function works by repeatedly drawing the image with a colored shadow to build up an intense glow,
 * and then drawing the original image on top without the shadow effect.
 *
 * @param {HTMLImageElement} originalImg The input Image object. Must be fully loaded.
 * @param {string} auraColor The CSS color string for the aura (e.g., 'red', '#ff0000'). Defaults to red as requested.
 * @param {number} auraSize The size or spread of the aura in pixels. This corresponds to the shadow's blur radius.
 * @param {number} auraIntensity The strength/solidity of the aura. Higher numbers result in a more opaque glow.
 * @returns {HTMLCanvasElement} A new canvas element containing the image with the aura effect.
 */
function processImage(originalImg, auraColor = '#ff0000', auraSize = 20, auraIntensity = 5) {
    // Validate and sanitize numeric parameters, falling back to defaults if invalid.
    const finalAuraSize = !isNaN(Number(auraSize)) && Number(auraSize) >= 0 ? Number(auraSize) : 20;
    const finalAuraIntensity = !isNaN(Number(auraIntensity)) && Number(auraIntensity) > 0 ? Number(auraIntensity) : 5;

    // The canvas needs extra space for the blur effect to spread.
    // A padding equal to the blur radius on all sides is sufficient.
    const padding = finalAuraSize * 2;
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height to get the intrinsic dimensions of the image.
    canvas.width = originalImg.naturalWidth + padding;
    canvas.height = originalImg.naturalHeight + padding;

    // Calculate the top-left corner position to draw the image to center it.
    const drawX = padding / 2;
    const drawY = padding / 2;

    // --- Step 1: Create the aura ---
    // Set the shadow properties. The blur creates the glow, and the color tints it.
    ctx.shadowColor = auraColor;
    ctx.shadowBlur = finalAuraSize;

    // By drawing the image multiple times, the semi-transparent shadow layers stack up,
    // creating a more solid and intense aura.
    for (let i = 0; i < finalAuraIntensity; i++) {
        ctx.drawImage(
            originalImg,
            drawX,
            drawY,
            originalImg.naturalWidth,
            originalImg.naturalHeight
        );
    }

    // --- Step 2: Draw the original image on top ---
    // Disable the shadow effect to ensure the top image is drawn cleanly without a glow.
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'transparent';

    ctx.drawImage(
        originalImg,
        drawX,
        drawY,
        originalImg.naturalWidth,
        originalImg.naturalHeight
    );

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