Image Glow Effect Editor

/**
 * Adds a glow effect to an image.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} color The color of the glow (e.g., "#FF0000", "blue").
 * @param {number} radius The blur radius of the glow in pixels.
 * @param {number} intensity The number of times to apply the glow effect, making it more intense.
 * @returns {HTMLCanvasElement} A canvas element with the glowing image.
 */
function processImage(originalImg, color = "#FFFFFF", radius = 10, intensity = 3) {
    // Sanitize parameters to ensure they are valid numbers
    const glowRadius = Math.max(0, Number(radius));
    const glowIntensity = Math.max(1, Math.floor(Number(intensity)));

    // Create a new canvas that is large enough to contain the image and its glow
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions with padding for the glow
    canvas.width = originalImg.width + glowRadius * 2;
    canvas.height = originalImg.height + glowRadius * 2;

    // Configure the glow effect using the canvas shadow properties
    ctx.shadowColor = color;
    ctx.shadowBlur = glowRadius;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // To create a more solid and intense glow, we draw the image multiple times.
    // Each draw operation adds another layer of the shadow.
    for (let i = 0; i < glowIntensity; i++) {
        // The image is drawn offset by the glow radius to center it in the canvas
        ctx.drawImage(originalImg, glowRadius, glowRadius, originalImg.width, originalImg.height);
    }

    // Reset the shadow properties to stop applying the glow effect
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'rgba(0,0,0,0)'; // Use a fully transparent color

    // Draw the original image one last time on top of the glow.
    // This ensures the image itself is sharp and clear, not blurred.
    ctx.drawImage(originalImg, glowRadius, glowRadius, originalImg.width, originalImg.height);

    // Return the canvas with the final glowing image
    return canvas;
}