Image Title And Subtitle Creator

async function processImage(originalImg,
    titleText = "Your Title Here",
    subtitleText = "Your subtitle goes here",
    titleFontSize = 60,
    subtitleFontSize = 30,
    fontFamily = "Oswald",
    textColor = "#FFFFFF",
    textPosition = "bottom",
    textAlignment = "center",
    backgroundBandColor = "rgba(0, 0, 0, 0.5)",
    verticalPadding = 30
) {
    /**
     * Dynamically loads a font from Google Fonts.
     * @param {string} font The name of the font family.
     */
    const loadGoogleFont = async (font) => {
        const fontName = font.split(',')[0].trim().replace(/['"]/g, '');
        // Check if the font is already loaded or is being loaded.
        if ([...document.fonts].some(f => f.family === fontName)) {
            return;
        }

        const link = document.createElement('link');
        link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/ /g, '+')}:wght@400;700&display=swap`;
        link.rel = 'stylesheet';
        document.head.appendChild(link);

        try {
            await document.fonts.load(`1em "${fontName}"`);
        } catch (e) {
            console.warn(`Could not load font "${fontName}". It might not be available on Google Fonts. Falling back to system fonts.`);
        }
    };

    // A list of common web-safe and generic fonts to avoid trying to load them from Google Fonts.
    const webSafeFonts = ["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "arial", "helvetica", "verdana", "tahoma", "trebuchet ms", "times new roman", "georgia", "garamond", "courier new", "brush script mt"];
    if (!webSafeFonts.includes(fontFamily.toLowerCase())) {
        await loadGoogleFont(fontFamily);
    }

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the image
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

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

    const hasTitle = titleText && String(titleText).trim() !== '';
    const hasSubtitle = subtitleText && String(subtitleText).trim() !== '';

    // If there's no text, we can return the canvas with just the image
    if (!hasTitle && !hasSubtitle) {
        return canvas;
    }

    // Calculate the total height required for the text block and background band
    const lineSpacing = titleFontSize * 0.2;
    const totalTextHeight = (hasTitle ? titleFontSize : 0) + (hasSubtitle ? subtitleFontSize : 0) + (hasTitle && hasSubtitle ? lineSpacing : 0);
    const bandHeight = totalTextHeight + 2 * verticalPadding;

    // Draw background band if a color is specified
    if (backgroundBandColor && backgroundBandColor !== 'transparent') {
        ctx.fillStyle = backgroundBandColor;
        let bandY;
        switch (textPosition) {
            case 'top':
                bandY = 0;
                break;
            case 'center':
                bandY = h / 2 - bandHeight / 2;
                break;
            case 'bottom':
            default:
                bandY = h - bandHeight;
                break;
        }
        ctx.fillRect(0, bandY, w, bandHeight);
    }

    // Set text properties
    ctx.fillStyle = textColor;
    ctx.textAlign = textAlignment;
    ctx.textBaseline = 'middle'; // Align text vertically to its center

    // Determine horizontal position (x-coordinate)
    const horizontalPadding = 40;
    let x;
    switch (textAlignment) {
        case 'left':
            x = horizontalPadding;
            break;
        case 'right':
            x = w - horizontalPadding;
            break;
        case 'center':
        default:
            x = w / 2;
            break;
    }

    // Determine vertical center of the text block (y-coordinate for alignment)
    let blockCenterY;
    switch (textPosition) {
        case 'top':
            blockCenterY = bandHeight / 2;
            break;
        case 'center':
            blockCenterY = h / 2;
            break;
        case 'bottom':
        default:
            blockCenterY = h - bandHeight / 2;
            break;
    }

    // Calculate specific y-coordinates for title and subtitle
    let titleY, subtitleY;
    if (hasTitle && hasSubtitle) {
        titleY = blockCenterY - (totalTextHeight / 2) + (titleFontSize / 2);
        subtitleY = blockCenterY + (totalTextHeight / 2) - (subtitleFontSize / 2);
    } else if (hasTitle) {
        titleY = blockCenterY;
    } else if (hasSubtitle) {
        subtitleY = blockCenterY;
    }

    // Draw title with a slight shadow for better readability
    if (hasTitle) {
        ctx.font = `bold ${titleFontSize}px "${fontFamily}", sans-serif`;
        ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
        ctx.shadowBlur = 5;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.fillText(titleText, x, titleY);
    }

    // Reset shadow before drawing subtitle
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Draw subtitle
    if (hasSubtitle) {
        ctx.font = `${subtitleFontSize}px "${fontFamily}", sans-serif`;
        ctx.fillText(subtitleText, x, subtitleY);
    }

    return canvas;
}