Image Arabic Style Enhancer

/**
 * Applies an "Arabic Style" enhancement to an image.
 * This effect combines a warm sepia tone, a semi-transparent geometric pattern overlay,
 * and a subtle vignette to evoke a feeling of traditional Arabic art and atmosphere.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} patternColor A string representing the color of the geometric pattern overlay. It should be semi-transparent (e.g., 'rgba(212, 175, 55, 0.4)'). Defaults to a semi-transparent gold color.
 * @param {number} sepiaIntensity A number between 0.0 and 1.0 that controls the strength of the sepia (warm tone) effect. 0 means no effect, 1 means full sepia. Defaults to 0.7.
 * @param {number} patternScale A number that defines the size of the repeating geometric pattern unit in pixels. Larger values mean a larger pattern. Defaults to 80.
 * @returns {HTMLCanvasElement} A new canvas element with the Arabic style effect applied.
 */
function processImage(originalImg, patternColor = 'rgba(212, 175, 55, 0.4)', sepiaIntensity = 0.7, patternScale = 80) {
    // 1. Create the main canvas and get its 2D context
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 2. Apply a sepia (warm tone) filter
    // Only apply if intensity is greater than 0 to save processing time
    if (sepiaIntensity > 0) {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        const clampedIntensity = Math.max(0.0, Math.min(1.0, sepiaIntensity));

        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // Standard sepia RGB values
            const tr = 0.393 * r + 0.769 * g + 0.189 * b;
            const tg = 0.349 * r + 0.686 * g + 0.168 * b;
            const tb = 0.272 * r + 0.534 * g + 0.131 * b;

            // Blend the original color with the sepia color based on intensity
            data[i] = (1 - clampedIntensity) * r + clampedIntensity * tr;
            data[i + 1] = (1 - clampedIntensity) * g + clampedIntensity * tg;
            data[i + 2] = (1 - clampedIntensity) * b + clampedIntensity * tb;
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // 3. Create and draw the geometric pattern overlay
    if (patternScale > 0) {
        // Create a small, temporary canvas for the repeatable pattern unit
        const pattCanvas = document.createElement('canvas');
        const pattCtx = pattCanvas.getContext('2d');
        const s = Math.max(10, patternScale); // Ensure pattern is not too small
        pattCanvas.width = s;
        pattCanvas.height = s;

        // Draw a simple, repeating geometric shape (Zellige-inspired)
        // This shape tiles perfectly to create an intricate pattern.
        pattCtx.strokeStyle = patternColor;
        pattCtx.lineWidth = Math.max(1, s / 40); // Scale line width with pattern size
        pattCtx.beginPath();
        pattCtx.moveTo(s / 2, 0);
        pattCtx.lineTo(s, s / 2);
        pattCtx.lineTo(s / 2, s);
        pattCtx.lineTo(0, s / 2);
        pattCtx.closePath();
        pattCtx.stroke();

        // Use the pattern canvas to create a fill pattern
        const pattern = ctx.createPattern(pattCanvas, 'repeat');
        ctx.fillStyle = pattern;
        
        // Apply the pattern over the entire image
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    
    // 4. Add a subtle vignette effect to darken the edges
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const outerRadius = Math.sqrt(centerX * centerX + centerY * centerY);
    const innerRadius = outerRadius * 0.4;

    const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.5)');

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 5. Return the final canvas
    return canvas;
}