Image Aura Effect Creator

/**
 * Creates a glowing aura effect around an image using the canvas shadow properties.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} [auraColor='#00bfff'] The color of the aura. Accepts any valid CSS color string (e.g., 'red', '#ff0000', 'rgba(255,0,0,0.5)').
 * @param {number} [blurRadius=20] The size and blurriness of the aura. Larger values create a bigger, softer glow.
 * @param {number} [offsetX=0] The horizontal offset of the aura relative to the image. A positive value shifts it right, a negative value shifts it left.
 * @param {number} [offsetY=0] The vertical offset of the aura relative to the image. A positive value shifts it down, a negative value shifts it up.
 * @returns {HTMLCanvasElement} A new canvas element displaying the image with the aura effect.
 */
function processImage(originalImg, auraColor = '#00bfff', blurRadius = 20, offsetX = 0, offsetY = 0) {
    // Sanitize and validate parameters to ensure they are numbers.
    const safeBlurRadius = Math.max(0, Number(blurRadius)) || 0;
    const safeOffsetX = Number(offsetX) || 0;
    const safeOffsetY = Number(offsetY) || 0;

    // Create a new canvas to hold the result.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate the required canvas dimensions. The canvas needs to be larger than the
    // original image to accommodate the blur radius and any offsets without clipping the aura.
    const widthPadding = safeBlurRadius * 2 + Math.abs(safeOffsetX);
    const heightPadding = safeBlurRadius * 2 + Math.abs(safeOffsetY);

    canvas.width = originalImg.width + widthPadding;
    canvas.height = originalImg.height + heightPadding;

    // Calculate the position to draw the image on the canvas. This position ensures
    // there's enough space on all sides for the aura to render, adjusting for negative
    // offsets by shifting the drawing position.
    const drawX = safeBlurRadius + Math.max(0, -safeOffsetX);
    const drawY = safeBlurRadius + Math.max(0, -safeOffsetY);

    // --- Create the Aura ---
    // Set the canvas context's shadow properties. These properties will be applied to
    // subsequent drawing operations, effectively creating our aura effect. The shadow
    // is only rendered for the non-transparent parts of the drawn image.
    ctx.shadowColor = auraColor;
    ctx.shadowBlur = safeBlurRadius;
    ctx.shadowOffsetX = safeOffsetX;
    ctx.shadowOffsetY = safeOffsetY;

    // To create a more intense and vibrant glow, we draw the image multiple times with the
    // shadow effect enabled. Since the default composite operation is 'source-over', this
    // stacks the semi-transparent shadow on top of itself, making it more opaque and
    // brighter near the image outline.
    ctx.drawImage(originalImg, drawX, drawY);
    ctx.drawImage(originalImg, drawX, drawY);
    ctx.drawImage(originalImg, drawX, drawY);

    // --- Draw the Original Image on Top ---
    // Turn off the shadow effect by resetting the properties to transparent/zero.
    // If we skip this step, the final crisp image drawn on top would also cast a shadow.
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Finally, draw the original, crisp image on top of the generated glow.
    ctx.drawImage(originalImg, drawX, drawY);

    // Return the final canvas element which can be appended to the DOM.
    return canvas;
}