Image Fate Generator

function processImage(originalImg, fateText = "F A T U M", mysticTint = "#4b0082", grayscaleLevel = 0.8, contrastLevel = 1.3) {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Apply base filters for a dramatic, cinematic "fateful" look
    ctx.filter = `contrast(${contrastLevel}) grayscale(${grayscaleLevel})`;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Reset filter for subsequent drawing operations
    ctx.filter = 'none';

    // 2. Apply a mystical color tint using the multiply composite operation
    ctx.globalCompositeOperation = "multiply";
    ctx.fillStyle = mysticTint;
    ctx.globalAlpha = 0.5; // Moderate opacity for the mystical hue
    ctx.fillRect(0, 0, width, height);

    // 3. Add a heavy vignette to create a central focus
    ctx.globalCompositeOperation = "source-over";
    ctx.globalAlpha = 1.0;
    const cx = width / 2;
    const cy = height / 2;
    const radius = Math.max(width, height) * 0.75;
    const gradient = ctx.createRadialGradient(cx, cy, radius * 0.3, cx, cy, radius);
    gradient.addColorStop(0, "rgba(0, 0, 0, 0)");
    gradient.addColorStop(1, "rgba(0, 0, 0, 0.9)");
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 4. Draw a mystical, tarot-like border
    const margin = Math.max(10, width * 0.04);
    const goldColor = "#D4AF37";
    
    ctx.strokeStyle = goldColor;
    ctx.lineWidth = Math.max(2, width * 0.008);
    ctx.strokeRect(margin, margin, width - 2 * margin, height - 2 * margin);

    // Draw an inner delicate border
    const innerMarginOffset = Math.max(4, width * 0.015);
    ctx.lineWidth = Math.max(1, width * 0.003);
    ctx.strokeRect(
        margin + innerMarginOffset, 
        margin + innerMarginOffset, 
        width - 2 * (margin + innerMarginOffset), 
        height - 2 * (margin + innerMarginOffset)
    );

    // 5. Create the Fate text box at the bottom
    const boxHeight = Math.max(50, height * 0.12);
    ctx.fillStyle = "rgba(0, 0, 0, 0.75)"; // Dark semi-transparent background for text
    ctx.fillRect(margin, height - margin - boxHeight, width - 2 * margin, boxHeight);

    // Add a top and bottom gold line to the text box
    ctx.beginPath();
    ctx.moveTo(margin, height - margin - boxHeight);
    ctx.lineTo(width - margin, height - margin - boxHeight);
    ctx.stroke();

    // 6. Draw the Fate Text ("Fatum")
    const fontSize = Math.floor(boxHeight * 0.45);
    ctx.fillStyle = goldColor;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.font = `italic 400 ${fontSize}px "Times New Roman", Times, serif`;
    
    // Add text shadow for a subtle enigmatic glow
    ctx.shadowColor = "black";
    ctx.shadowBlur = 6;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    // Center text perfectly inside the box
    const textX = width / 2;
    const textY = height - margin - (boxHeight / 2);
    
    ctx.fillText(fateText, textX, textY);
    
    // Reset shadow just in case
    ctx.shadowColor = "transparent";
    ctx.shadowBlur = 0;

    return canvas;
}