Image Title Writer Tool

function processImage(
    originalImg,
    titleText = "Image Title",
    position = "bottom",
    style = "append",
    fontSize = 40,
    fontColor = "#000000",
    bgColor = "#FFFFFF",
    fontFamily = "sans-serif",
    padding = 20
) {
    // Validate and format text numbers
    fontSize = parseFloat(fontSize);
    if (isNaN(fontSize) || fontSize <= 0) fontSize = 40;
    
    padding = parseFloat(padding);
    if (isNaN(padding) || padding < 0) padding = 20;
    
    titleText = String(titleText);
    position = String(position).toLowerCase();
    style = String(style).toLowerCase();

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set initial width to calculate text wrapping
    canvas.width = originalImg.width;
    ctx.font = `bold ${fontSize}px "${fontFamily}", sans-serif`;

    // Calculate word wrap
    const words = titleText.split(' ');
    let lines = [];
    let currentLine = words[0] || '';
    const maxWidth = Math.max(10, canvas.width - (padding * 2));

    for (let i = 1; i < words.length; i++) {
        let word = words[i];
        let width = ctx.measureText(currentLine + " " + word).width;
        if (width < maxWidth) {
            currentLine += " " + word;
        } else {
            lines.push(currentLine);
            currentLine = word;
        }
    }
    if (currentLine) {
        lines.push(currentLine);
    }

    // Determine the height needed for the title block
    const lineHeight = fontSize * 1.2;
    const textBlockHeight = lines.length * lineHeight;
    const titleHeight = textBlockHeight + (padding * 2);

    // Adjust canvas height based on the style
    if (style === "append") {
        canvas.height = originalImg.height + titleHeight;
    } else { // overlay
        canvas.height = originalImg.height;
    }

    // Context gets reset when canvas dimensions change, so re-apply font settings
    ctx.font = `bold ${fontSize}px "${fontFamily}", sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Draw the background color and the original image
    if (style === "append") {
        ctx.fillStyle = bgColor;
        if (position === "top") {
            ctx.fillRect(0, 0, canvas.width, titleHeight);
            ctx.drawImage(originalImg, 0, titleHeight);
        } else { // bottom is default
            ctx.fillRect(0, originalImg.height, canvas.width, titleHeight);
            ctx.drawImage(originalImg, 0, 0);
        }
    } else { // overlay style
        ctx.drawImage(originalImg, 0, 0);
        
        ctx.fillStyle = bgColor;
        if (position === "top") {
            ctx.fillRect(0, 0, canvas.width, titleHeight);
        } else { // bottom is default
            ctx.fillRect(0, canvas.height - titleHeight, canvas.width, titleHeight);
        }
    }

    // Draw the title text
    ctx.fillStyle = fontColor;
    let startY;

    if (style === "append") {
        if (position === "top") {
            startY = padding + (lineHeight / 2);
        } else {
            startY = originalImg.height + padding + (lineHeight / 2);
        }
    } else { // overlay style
        if (position === "top") {
            startY = padding + (lineHeight / 2);
        } else {
            startY = canvas.height - titleHeight + padding + (lineHeight / 2);
        }
    }

    const textX = canvas.width / 2;
    for (let i = 0; i < lines.length; i++) {
        ctx.fillText(lines[i], textX, startY + (i * lineHeight));
    }

    return canvas;
}