Arabic Style Image Designer

function processImage(originalImg, overlayOpacity = 0.3, patternColor = '#FFFFFF', tintColor = '#E8C76B', tintOpacity = 0.2, archStyle = 'pointed') {

    // 1. Create a canvas and get its context
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');
    const w = canvas.width;
    const h = canvas.height;

    /**
     * Helper function to define the path for different arch styles.
     * This path will be used for both clipping the image and drawing the border.
     * @param {string} style - The style of the arch ('pointed' or 'rounded').
     */
    const createArchPath = (style) => {
        ctx.beginPath();
        if (style === 'rounded') {
            // A classic semi-circular Roman arch
            const sideHeight = h / 2;
            const radius = w / 2;
            ctx.moveTo(0, h);
            ctx.lineTo(0, sideHeight);
            ctx.arc(w / 2, sideHeight, radius, Math.PI, 0, false);
            ctx.lineTo(w, h);
            ctx.closePath();
        } else { // 'pointed' style is the default
            // A parabolic arch that gives a pointed appearance
            const topY = h * 0.05; // How high the point of the arch goes
            const sideHeight = h * 0.5; // Where the curve starts from the sides
            ctx.moveTo(0, h);
            ctx.lineTo(0, sideHeight);
            ctx.quadraticCurveTo(w / 2, topY, w, sideHeight);
            ctx.lineTo(w, h);
            ctx.closePath();
        }
    };

    /**
     * Helper function to create a small canvas containing a tileable geometric pattern.
     * This uses an 8-pointed star (Rub el Hizb), common in Islamic art.
     * @param {number} size - The width and height of the pattern tile.
     * @param {string} color - The color of the pattern lines.
     * @returns {HTMLCanvasElement} A canvas element with the pattern tile.
     */
    const createPatternCanvas = (size, color) => {
        const pCanvas = document.createElement('canvas');
        const pCtx = pCanvas.getContext('2d');
        pCanvas.width = pCanvas.height = size;
        pCtx.strokeStyle = color;
        pCtx.lineWidth = Math.max(1, size / 30); // Ensure line is at least 1px

        // Draw an 8-pointed star by overlaying two rotated squares
        const squareSize = size / 2.5;
        pCtx.save();
        pCtx.translate(size / 2, size / 2);
        
        // First square
        pCtx.strokeRect(-squareSize / 2, -squareSize / 2, squareSize, squareSize);
        
        // Second square, rotated
        pCtx.rotate(Math.PI / 4);
        pCtx.strokeRect(-squareSize / 2, -squareSize / 2, squareSize, squareSize);
        
        pCtx.restore();
        return pCanvas;
    };

    // 2. Set the arch path as a clipping region
    ctx.save();
    createArchPath(archStyle);
    ctx.clip();

    // 3. Draw the original image within the arch
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 4. Apply a semi-transparent color tint overlay
    if (tintOpacity > 0 && tintColor) {
        ctx.globalAlpha = tintOpacity;
        ctx.fillStyle = tintColor;
        ctx.fillRect(0, 0, w, h);
        ctx.globalAlpha = 1.0; // Reset alpha
    }

    // 5. Create and draw the geometric pattern overlay
    if (overlayOpacity > 0 && patternColor) {
        const patternTileSize = Math.min(w, h) / 8;
        const patternCanvas = createPatternCanvas(patternTileSize, patternColor);
        const pattern = ctx.createPattern(patternCanvas, 'repeat');
        
        ctx.globalAlpha = overlayOpacity;
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, w, h);
        ctx.globalAlpha = 1.0; // Reset alpha
    }

    // 6. Restore the context to remove the clipping mask
    ctx.restore();

    // 7. Draw a decorative border around the arch for a finished look
    // Draw a thicker, darker backing for the border
    ctx.lineWidth = Math.max(2, w / 100);
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
    createArchPath(archStyle);
    ctx.stroke();
    
    // Draw the main, lighter border on top
    ctx.lineWidth = Math.max(1, w / 200);
    ctx.strokeStyle = patternColor;
    createArchPath(archStyle);
    ctx.stroke();

    // 8. Return the final canvas element
    return canvas;
}