Image Mexican Papel Picado Filter Effect

async function processImage(
    originalImg,
    overlayColors = "rgba(227,64,97,0.75),rgba(243,127,47,0.75),rgba(253,203,57,0.75),rgba(124,184,60,0.75),rgba(34,150,214,0.75),rgba(145,72,184,0.75)",
    cutoutShape = "diamond",
    cutoutSize = 30,
    cutoutSpacing = 15
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // If image has no dimensions (e.g., not loaded), return an empty or minimal canvas
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image has no dimensions. Returning empty canvas.");
        // Set a minimal size to avoid issues with 0x0 canvas if browser default is 0x0
        canvas.width = canvas.width || 1;
        canvas.height = canvas.height || 1;
        return canvas;
    }

    // Ensure numeric parameters are numbers and have valid values
    cutoutSize = Math.max(1, Number(cutoutSize)); // Cutout size must be at least 1px
    cutoutSpacing = Math.max(0, Number(cutoutSpacing)); // Spacing can be 0

    // Parse and validate overlayColors
    const parsedColors = overlayColors.split(',').map(c => c.trim()).filter(c => c); // Filter out empty strings
    const colors = parsedColors.length > 0 ? parsedColors : ["rgba(220, 20, 60, 0.75)"]; // Default fallback color

    // 1. Draw the original image as the base layer
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 'margin' defines the space from canvas edges where the original image remains untouched by colored strips.
    // This margin is half of the spacing, creating a balanced look.
    const margin = cutoutSpacing / 2;
    // 'step' is the total dimension (width or height) of one pattern unit (cutout + its surrounding space)
    const step = cutoutSize + cutoutSpacing;

    let rowIndex = 0;
    // Iterate for each row of Papel Picado strips.
    // yPos is the y-coordinate of the top edge of the current Papel Picado strip.
    for (let yPos = margin; yPos + cutoutSize <= canvas.height - margin; yPos += step, rowIndex++) {
        const currentStripY = yPos; // Y-coordinate for the top of the current colored strip
        const currentRowColor = colors[rowIndex % colors.length]; // Cycle through the provided colors

        // 2. Draw the "paper" strip for the current row.
        // This strip has the full width of the canvas and a height equal to cutoutSize.
        ctx.fillStyle = currentRowColor;
        ctx.fillRect(0, currentStripY, canvas.width, cutoutSize);

        // 3. "Cut out" shapes from this strip using 'destination-out'.
        // The fillStyle for cutting doesn't affect the color; it just defines the area to make transparent.
        // Any opaque color works; black is conventional.
        ctx.fillStyle = 'black';
        ctx.globalCompositeOperation = 'destination-out';

        // Iterate for each cutout shape within the current row.
        // xPos is the x-coordinate of the left edge of the current cutout's bounding box.
        for (let xPos = margin; xPos + cutoutSize <= canvas.width - margin; xPos += step) {
            // Calculate the center of the cutout shape.
            // Shapes are drawn relative to this center (cx, cy).
            const cx = xPos + cutoutSize / 2;
            const cy = currentStripY + cutoutSize / 2; // Center Y is within the current strip

            ctx.beginPath();
            if (cutoutShape === "diamond") {
                ctx.moveTo(cx, cy - cutoutSize / 2); // Top point
                ctx.lineTo(cx + cutoutSize / 2, cy); // Right point
                ctx.lineTo(cx, cy + cutoutSize / 2); // Bottom point
                ctx.lineTo(cx - cutoutSize / 2, cy); // Left point
                ctx.closePath();
            } else if (cutoutShape === "circle") {
                ctx.arc(cx, cy, cutoutSize / 2, 0, 2 * Math.PI);
            } else if (cutoutShape === "square") {
                // For rect, (cx - size/2, cy - size/2) is the top-left corner
                ctx.rect(cx - cutoutSize / 2, cy - cutoutSize / 2, cutoutSize, cutoutSize);
            } else {
                // If cutoutShape is unknown, no shape is cut for this spot.
                // Alternatively, a default shape could be drawn here.
            }
            ctx.fill(); // Apply the cutout
        }
        // Reset composite operation to default for the next strip or subsequent drawing operations.
        ctx.globalCompositeOperation = 'source-over';
    }

    return canvas;
}