Image Seed Of Life Pattern Filter Effect Tool

function processImage(originalImg, lineColor = 'rgba(255, 255, 255, 0.7)', lineWidth = 2, patternScale = 0.8, blendMode = 'overlay') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // Draw the original image onto the canvas
    // Ensure image is loaded, otherwise width/height might be 0
    if (imgWidth > 0 && imgHeight > 0) {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } else {
        // If image dimensions are invalid, return an empty (or minimally sized) canvas
        // or handle as an error, though returning current canvas is safer.
        console.warn("Original image has zero width or height. Cannot process.");
        // Optionally, draw a placeholder or clear color
        // ctx.fillStyle = 'grey';
        // ctx.fillRect(0,0, canvas.width || 1, canvas.height || 1); // Ensure canvas is at least 1x1 if 0x0
        // For now, just return the canvas which might be 0x0
        return canvas;
    }


    // Calculate parameters for the Seed of Life pattern
    const centerX = imgWidth / 2;
    const centerY = imgHeight / 2;

    // The Seed of Life pattern consists of 7 circles of the same radius, say 'r'.
    // The centers of the 6 outer circles are located at a distance 'r' from the center of the central circle.
    // The total width/height occupied by this pattern is approximately 4r (from edge to edge through center).
    // We want this diameter (4r) to be 'patternScale' of the smaller image dimension.
    const availableSize = Math.min(imgWidth, imgHeight) * patternScale;
    const circleRadius = availableSize / 4;

    // If the pattern is too small to be drawn (e.g. image too small, scale too small, or line width invalid)
    if (circleRadius <= 0 || lineWidth <= 0) {
        // The original image is already drawn, so just return the canvas
        return canvas;
    }

    // Store current globalCompositeOperation to restore it later
    const originalGCO = ctx.globalCompositeOperation;

    // Set drawing properties for the pattern
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;

    // Apply blend mode
    if (typeof ctx.globalCompositeOperation !== 'undefined') {
        // List of common valid globalCompositeOperation values
        const validGCOs = [
            "source-over", "source-in", "source-out", "source-atop",
            "destination-over", "destination-in", "destination-out", "destination-atop",
            "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken",
            "lighten", "color-dodge", "color-burn", "hard-light", "soft-light",
            "difference", "exclusion", "hue", "saturation", "color", "luminosity"
        ];

        if (validGCOs.includes(blendMode.toLowerCase())) {
            try {
                ctx.globalCompositeOperation = blendMode;
            } catch (e) {
                // This catch is highly unlikely if the mode is in validGCOs and supported, but for extreme safety:
                console.warn(`Error applying blend mode "${blendMode}" despite being on the recognized list. Using 'source-over'. Details: ${e}`);
                ctx.globalCompositeOperation = 'source-over'; // Fallback
            }
        } else {
            console.warn(`Blend mode "${blendMode}" is not recognized or supported. Using 'source-over'.`);
            ctx.globalCompositeOperation = 'source-over'; // Fallback for unrecognized modes
        }
    }

    ctx.beginPath();

    // 1. Draw the central circle
    ctx.arc(centerX, centerY, circleRadius, 0, 2 * Math.PI);

    // 2. Draw the 6 surrounding circles
    // Their centers are on a circle of radius 'circleRadius' around the main center (centerX, centerY).
    // Each surrounding circle also has a radius of 'circleRadius'.
    for (let i = 0; i < 6; i++) {
        // Angle for each of the 6 circles (0, 60, 120, 180, 240, 300 degrees)
        // 0 radians = 0 degrees (points to the right)
        // Math.PI / 3 radians = 60 degrees
        const angle = i * (Math.PI / 3); 
        
        const outerCircleCenterX = centerX + circleRadius * Math.cos(angle);
        const outerCircleCenterY = centerY + circleRadius * Math.sin(angle);
        
        ctx.arc(outerCircleCenterX, outerCircleCenterY, circleRadius, 0, 2 * Math.PI);
    }

    ctx.stroke(); // Draw all paths (all 7 circles) as outlines

    // Restore original globalCompositeOperation
    if (typeof ctx.globalCompositeOperation !== 'undefined') {
        ctx.globalCompositeOperation = originalGCO;
    }

    return canvas;
}