Image Glitter Filter Application

function processImage(originalImg, density = 0.05, minSize = 2, maxSize = 5, colorsStr = "#FFFFFF,#C0C0C0,#FFD700") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // If the image has no size or density is not positive, no glitter can be added.
    if (imgWidth === 0 || imgHeight === 0 || density <= 0) {
        return canvas;
    }

    // Ensure minSize is not greater than maxSize, and both are non-negative.
    let currentMinSize = Math.max(0, minSize);
    let currentMaxSize = Math.max(0, maxSize);

    if (currentMinSize > currentMaxSize) {
        // Swap them if minSize was greater than maxSize
        [currentMinSize, currentMaxSize] = [currentMaxSize, currentMinSize];
    }

    // Parse the colors string
    // Valid hex color formats: #RGB or #RRGGBB
    const hexColorRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/;
    let parsedColors = colorsStr.split(',')
        .map(c => c.trim())
        .filter(c => hexColorRegex.test(c));

    // If no valid colors are provided, default to white glitter
    if (parsedColors.length === 0) {
        parsedColors = ["#FFFFFF"];
    }

    const numParticles = Math.floor(imgWidth * imgHeight * density);

    // Add glitter particles
    for (let i = 0; i < numParticles; i++) {
        // Random position for the glitter particle
        const x = Math.random() * imgWidth;
        const y = Math.random() * imgHeight;

        // Random size for the particle
        const particleSize = Math.random() * (currentMaxSize - currentMinSize) + currentMinSize;

        // If particleSize ends up being zero or negative (e.g., if min/max were 0), skip drawing
        if (particleSize <= 0) {
            continue;
        }

        // Random color from the parsed list
        const color = parsedColors[Math.floor(Math.random() * parsedColors.length)];
        
        // Random opacity for a shimmering effect
        const opacity = 0.3 + Math.random() * 0.7; // Opacity from 0.3 to 1.0

        ctx.strokeStyle = color;
        ctx.globalAlpha = opacity;
        // Line width for the glitter star points. Min 1px for visibility for small sizes.
        ctx.lineWidth = Math.max(1, particleSize / 4); 

        // Draw a 4-pointed star (a simple cross shape)
        ctx.beginPath();
        // Horizontal line segment centered at (x,y)
        ctx.moveTo(x - particleSize / 2, y);
        ctx.lineTo(x + particleSize / 2, y);
        // Vertical line segment centered at (x,y)
        ctx.moveTo(x, y - particleSize / 2);
        ctx.lineTo(x, y + particleSize / 2);
        
        ctx.stroke(); // Draws the path with the current strokeStyle, lineWidth, and globalAlpha
    }

    // Reset globalAlpha to its default value for any subsequent drawing operations elsewhere
    ctx.globalAlpha = 1.0;

    return canvas;
}