Image Broadway Marquee Filter Effect Tool

function processImage(originalImg, lightColor = 'yellow', lightSize = 10, lightSpacing = 20, glowColor = 'rgba(255, 255, 0, 0.5)', glowRadius = 15) {
    // Ensure originalImg is loaded and has dimensions
    const imgWidth = originalImg.naturalWidth || 0;
    const imgHeight = originalImg.naturalHeight || 0;

    // Validate and sanitize parameters
    // Ensure numeric parameters are numbers and have sensible minimums
    const numLightSize = Math.max(0, Number(lightSize));
    const numGlowRadius = Math.max(0, Number(glowRadius));
    // Light spacing must be at least 1 to prevent issues in loops and for practical rendering
    const numLightSpacing = Math.max(1, Number(lightSpacing)); 
    
    // Ensure color parameters are strings
    const strLightColor = String(lightColor);
    const strGlowColor = String(glowColor);

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate padding needed around the image.
    // This padding accommodates half the light's size (radius extending outwards) and the glow radius.
    const padding = (numLightSize / 2) + numGlowRadius;

    canvas.width = imgWidth + 2 * padding;
    canvas.height = imgHeight + 2 * padding;

    // Draw the original image centered, offset by the calculated padding.
    // Only draw if image has valid dimensions.
    if (imgWidth > 0 && imgHeight > 0) {
        ctx.drawImage(originalImg, padding, padding, imgWidth, imgHeight);
    }
    
    // If lightSize is 0, no lights to draw. Return canvas with the (potentially padded) image.
    if (numLightSize <= 0) {
        return canvas;
    }

    // Define the rectangle where the image content is drawn on the canvas
    const imgRectDrawX = padding; 
    const imgRectDrawY = padding; 

    // Calculate the path for the centers of the lights.
    // This path is a rectangle around the image, with lights centered half their size away from the image edge.
    const pathMinX = imgRectDrawX - numLightSize / 2;
    const pathMaxX = imgRectDrawX + imgWidth + numLightSize / 2;
    const pathMinY = imgRectDrawY - numLightSize / 2;
    const pathMaxY = imgRectDrawY + imgHeight + numLightSize / 2;

    // Use a Set to store unique light positions to avoid overdrawing or issues at corners.
    const lightPositions = new Set();

    function addLightPosition(x, y) {
        // Round coordinates to handle potential floating point inaccuracies when creating Set keys.
        lightPositions.add(`${Math.round(x)},${Math.round(y)}`);
    }

    // Add lights at the four corners of the path first.
    addLightPosition(pathMinX, pathMinY);
    addLightPosition(pathMaxX, pathMinY);
    addLightPosition(pathMinX, pathMaxY);
    addLightPosition(pathMaxX, pathMaxY);

    // Add lights along the top edge (between corners).
    // The loop `x < pathMaxX` ensures we don't try to add a light exactly at pathMaxX
    // if lightSpacing perfectly divides the length, as corners are already handled.
    for (let x = pathMinX + numLightSpacing; x < pathMaxX; x += numLightSpacing) {
        addLightPosition(x, pathMinY);
    }
    // Add lights along the bottom edge.
    for (let x = pathMinX + numLightSpacing; x < pathMaxX; x += numLightSpacing) {
        addLightPosition(x, pathMaxY);
    }
    // Add lights along the left edge.
    for (let y = pathMinY + numLightSpacing; y < pathMaxY; y += numLightSpacing) {
        addLightPosition(pathMinX, y);
    }
    // Add lights along the right edge.
    for (let y = pathMinY + numLightSpacing; y < pathMaxY; y += numLightSpacing) {
        addLightPosition(pathMaxX, y);
    }
    
    // Set up canvas shadow properties for the glow effect, if a glow is desired.
    if (numGlowRadius > 0) {
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowColor = strGlowColor;
        ctx.shadowBlur = numGlowRadius;
    }

    // Draw all the calculated light positions.
    ctx.fillStyle = strLightColor;
    lightPositions.forEach(posStr => {
        const [x, y] = posStr.split(',').map(Number); // Parse coordinates back from string
        ctx.beginPath();
        ctx.arc(x, y, numLightSize / 2, 0, 2 * Math.PI, false); // Draw circle for light
        ctx.fill();
    });

    // Reset shadow properties to prevent them from affecting any subsequent drawing on this context.
    if (numGlowRadius > 0) {
        ctx.shadowBlur = 0;
        ctx.shadowColor = 'rgba(0,0,0,0)'; // Transparent black
    }

    return canvas;
}