Image Title Mashup Generator

function processImage(originalImg, title1 = "JURASSIC", title2 = "TERMINATOR", color1 = "#ffcf00", color2 = "#ff004d") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

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

    // Sanitize and prepare text
    const w1 = String(title1).trim().toUpperCase();
    const w2 = String(title2).trim().toUpperCase();

    // Create the mashed-up word
    // Logic: First half of word 1 + Second half of word 2
    const mashupPart1 = w1.substring(0, Math.ceil(w1.length / 2));
    const mashupPart2 = w2.substring(Math.floor(w2.length / 2));
    const mashup = mashupPart1 + mashupPart2;

    // Add a dark bottom gradient for better text legibility
    const gradient = ctx.createLinearGradient(0, height * 0.5, 0, height);
    gradient.addColorStop(0, "rgba(0,0,0,0)");
    gradient.addColorStop(0.6, "rgba(0,0,0,0.6)");
    gradient.addColorStop(1, "rgba(0,0,0,0.9)");
    ctx.fillStyle = gradient;
    ctx.fillRect(0, height * 0.5, width, height * 0.5);

    // --- Typographic Calculation ---
    let baseFontSize = Math.floor(width * 0.15); // Start at 15% of width
    ctx.font = `${baseFontSize}px Impact, "Arial Black", sans-serif`;
    
    // Scale font size down if the mashed word exceeds 90% of the canvas width
    let totalWidth = ctx.measureText(mashup).width;
    if (totalWidth > width * 0.9) {
        baseFontSize = Math.floor(baseFontSize * (width * 0.9) / totalWidth);
        ctx.font = `${baseFontSize}px Impact, "Arial Black", sans-serif`;
    }

    // Measure actual widths after sizing
    const wPart1 = ctx.measureText(mashupPart1).width;
    const wPart2 = ctx.measureText(mashupPart2).width;
    totalWidth = wPart1 + wPart2;
    
    const startX = (width - totalWidth) / 2;
    const mainY = height * 0.85;

    ctx.textBaseline = "alphabetic";
    ctx.lineJoin = "round";
    const strokeWidth = Math.max(3, baseFontSize * 0.08);

    // Render Main Title Stroke
    ctx.lineWidth = strokeWidth;
    ctx.strokeStyle = "black";
    ctx.strokeText(mashupPart1, startX, mainY);
    ctx.strokeText(mashupPart2, startX + wPart1, mainY);

    // Render Main Title Fill
    ctx.fillStyle = String(color1);
    ctx.fillText(mashupPart1, startX, mainY);
    ctx.fillStyle = String(color2);
    ctx.fillText(mashupPart2, startX + wPart1, mainY);

    // --- Subtitle Setup ---
    const subtitle = (w1 && w2) ? `A MASHUP OF ${w1} AND ${w2}` : "";
    if (subtitle) {
        let subtitleSize = Math.max(10, Math.floor(baseFontSize * 0.25));
        ctx.font = `bold ${subtitleSize}px "Trebuchet MS", Arial, sans-serif`;
        
        let subWidth = ctx.measureText(subtitle).width;
        if (subWidth > width * 0.8) {
            subtitleSize = Math.floor(subtitleSize * (width * 0.8) / subWidth);
            ctx.font = `bold ${subtitleSize}px "Trebuchet MS", Arial, sans-serif`;
        }

        const subY = mainY + (baseFontSize * 0.35);
        
        ctx.textAlign = "center";
        
        // Render Subtitle Stroke
        ctx.lineWidth = Math.max(2, subtitleSize * 0.1);
        ctx.strokeStyle = "rgba(0,0,0,0.8)";
        ctx.strokeText(subtitle, width / 2, subY);
        
        // Render Subtitle Fill
        ctx.fillStyle = "white";
        ctx.fillText(subtitle, width / 2, subY);
    }

    return canvas;
}