Image Islamic Geometric Filter Effect Creator

async function processImage(originalImg, gridSize = 64, starPointScale = 1.0, lineWidth = 2, lineColor = "rgba(255, 255, 255, 0.75)") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    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
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Prepare to draw the geometric pattern
    const currentLineWidth = Number(lineWidth);
    const gs = Number(gridSize);
    const spScale = Number(starPointScale);

    ctx.lineWidth = currentLineWidth;
    ctx.strokeStyle = String(lineColor);
    
    if (currentLineWidth > 0) { // Only set join if there's a line to draw
      ctx.lineJoin = "miter"; 
    }

    const R = (gs / 2) * spScale;

    // Pre-allocate points array for star vertices
    const points = new Array(8);

    // Loop conditions: iterate as long as a star centered at (cx,cy)
    // could potentially overlap with the image boundaries.
    // A star centered at cx has its leftmost point at cx - R.
    // We need cx - R <= imgWidth for it to be potentially visible.
    // A star centered at cy has its topmost point at cy - R.
    // We need cy - R <= imgHeight.
    // Since i and j start from 0, cx and cy are always non-negative.
    // The star's rightmost point (cx + R) must be >= 0.
    // The star's bottommost point (cy + R) must be >= 0.
    // These are always true for i,j >= 0 and R > 0.

    for (let i = 0; ; i++) {
        const cx = i * gs;
        if (cx - R > imgWidth && i > 0) { // Optimization: if leftmost point of star is past image width, break
            break;
        }
        // If cx + R < 0 (star is entirely to the left of the image viewport)
        // This condition is not really needed since i starts at 0 and gs > 0, cx >=0. 
        // So cx+R will be positive if R > 0.

        for (let j = 0; ; j++) {
            const cy = j * gs;
            if (cy - R > imgHeight && j > 0) { // Optimization: if topmost point of star is past image height, break inner
                break;
            }
            // If cy + R < 0 (star is entirely above image viewport), not needed.

            // Calculate the 8 vertices of the star (points of a regular octagon)
            for (let k = 0; k < 8; k++) {
                // Angle: k * (2*PI/8) - PI/2  (starts North, then NE, E, SE, S, SW, W, NW)
                const angle = (Math.PI / 4) * k - (Math.PI / 2); 
                points[k] = {
                    x: cx + R * Math.cos(angle),
                    y: cy + R * Math.sin(angle)
                };
            }

            // Draw the {8/3} octagram (8-pointed star)
            // This connects P_k to P_(k+3) mod 8, forming a single continuous path:
            // P0 -> P3 -> P6 -> P1 -> P4 -> P7 -> P2 -> P5 -> P0
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            ctx.lineTo(points[3].x, points[3].y);
            ctx.lineTo(points[6].x, points[6].y);
            ctx.lineTo(points[1].x, points[1].y);
            ctx.lineTo(points[4].x, points[4].y);
            ctx.lineTo(points[7].x, points[7].y);
            ctx.lineTo(points[2].x, points[2].y);
            ctx.lineTo(points[5].x, points[5].y);
            ctx.closePath(); // Connects points[5] back to points[0]
            ctx.stroke();
            
            if (cy - R > imgHeight && cy + R > imgHeight && j === 0) { // Case where first row of stars is already below image
                 break; // Break j loop
            }
        }
        if (cx - R > imgWidth && cx + R > imgWidth && i === 0) { // Case where first column of stars is already beyond image
             break; // Break i loop
        }
    }

    return canvas;
}