Image Caption Adder

function processImage(
    originalImg, // This is an Image object
    captionText = "Image Caption", // string
    fontColor = "#FFFFFF", // string
    fontSize = 24, // number
    fontFamily = "Arial", // string
    position = "bottom", // string: "top" or "bottom"
    backgroundColor = "rgba(0, 0, 0, 0.7)", // string (CSS color)
    padding = 10 // number (pixels)
) {
    // --- Parameter Validation and Normalization ---
    const originalFontSize = fontSize; // Keep original value for logging if needed
    fontSize = Number(fontSize);
    if (isNaN(fontSize) || fontSize <= 0) {
        console.warn(`Invalid fontSize "${originalFontSize}", using default 24.`);
        fontSize = 24;
    }

    const originalPadding = padding; // Keep original value for logging
    padding = Number(padding);
    if (isNaN(padding) || padding < 0) {
        console.warn(`Invalid padding "${originalPadding}", using default 10.`);
        padding = 10;
    }

    const originalPosition = position; // Keep original value for logging
    position = String(position).toLowerCase();
    if (position !== "top" && position !== "bottom") {
        console.warn(`Invalid position "${originalPosition}", using default "bottom".`);
        position = "bottom";
    }

    captionText = String(captionText); // Ensure captionText is a string
    fontColor = String(fontColor);
    fontFamily = String(fontFamily);
    backgroundColor = String(backgroundColor);

    // --- Canvas Setup ---
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine image dimensions (use 0 if image not loaded or invalid)
    const imgWidth = (originalImg && typeof originalImg.width === 'number') ? originalImg.width : 0;
    const imgHeight = (originalImg && typeof originalImg.height === 'number') ? originalImg.height : 0;

    // Calculate the height of the caption bar
    const captionBarHeight = fontSize + 2 * padding;

    // Set canvas dimensions
    canvas.width = imgWidth;
    canvas.height = imgHeight + captionBarHeight;

    // --- Positioning Logic ---
    let imageDestY; // Y-coordinate where the original image will be drawn on the canvas
    let captionBgY; // Y-coordinate for the caption bar's background

    if (position === "top") {
        imageDestY = captionBarHeight;
        captionBgY = 0;
    } else { // Default to "bottom"
        imageDestY = 0;
        captionBgY = imgHeight;
    }
    
    // Y-coordinate for the text baseline (vertically centered within the caption bar)
    const textBaselineY = captionBgY + (captionBarHeight / 2);

    // --- Drawing Operations ---

    // 1. Draw caption bar background (if specified and bar has dimensions)
    if (backgroundColor && backgroundColor.toLowerCase() !== 'transparent' && captionBarHeight > 0 && canvas.width > 0) {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, captionBgY, canvas.width, captionBarHeight);
    }

    // 2. Draw the original image (if it has dimensions)
    if (imgWidth > 0 && imgHeight > 0 && originalImg) {
         ctx.drawImage(originalImg, 0, imageDestY, imgWidth, imgHeight);
    }
    
    // 3. Draw the caption text (if text is provided and there's space)
    if (captionText.length > 0 && canvas.width > 0 && fontSize > 0) {
        ctx.fillStyle = fontColor;
        ctx.font = `${fontSize}px ${fontFamily}`;
        ctx.textAlign = "center";    // Align text horizontally to the center
        ctx.textBaseline = "middle"; // Align text vertically to the middle

        const textX = canvas.width / 2; // Center text horizontally
        ctx.fillText(captionText, textX, textBaselineY);
    }
    
    return canvas;
}