Image Text Adder For Top Or Bottom

function processImage(originalImg, text = "Hello World", position = "bottom", fontFamily = "Arial", fontSize = 30, textColor = "black", textAlign = "center", padding = 10, textBackgroundColor = "transparent") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Validate and convert fontSize and padding to numbers
    let numFontSize = parseFloat(fontSize);
    if (isNaN(numFontSize) || numFontSize <= 0) {
        numFontSize = 30; // Default font size if input is invalid
    }

    let numPadding = parseFloat(padding);
    if (isNaN(numPadding) || numPadding < 0) {
        numPadding = 10; // Default padding if input is invalid
    }

    // Use naturalWidth and naturalHeight for Image objects to get original dimensions
    // If originalImg is an HTMLImageElement that might have CSS/attribute dimensions,
    // naturalWidth/Height provide the actual image dimensions.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are zero (e.g., image not loaded yet or invalid),
    // we might create a very small or zero-size canvas.
    // For robustness, one might add a specific error handling here,
    // but the problem implies a loaded Image object.
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image dimensions are zero. Output may be unusable.");
        // Optional: return a small canvas with an error message or throw.
        // For now, proceed as it might be intended for specific use cases.
    }

    // Calculate the height of the text band
    const textBandHeight = numFontSize + (2 * numPadding); // text height + top/bottom padding

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

    let imageYOffset;       // Y position where the original image will be drawn
    let textBandY;          // Y position of the top of the text band
    let textBaselineY;      // Y position for the text baseline (using "middle")

    if (position === "top") {
        textBandY = 0;
        imageYOffset = textBandHeight;
        textBaselineY = textBandHeight / 2; // Vertically center text in the top band
    } else { // Default to "bottom" for any other value of 'position'
        textBandY = imgHeight;
        imageYOffset = 0;
        textBaselineY = imgHeight + (textBandHeight / 2); // Vertically center text in the bottom band
    }

    // 1. Draw the text band background (if specified and not transparent)
    if (textBackgroundColor && textBackgroundColor !== "transparent") {
        ctx.fillStyle = textBackgroundColor;
        ctx.fillRect(0, textBandY, canvas.width, textBandHeight);
    }

    // 2. Draw the original image
    // Uses dWidth/dHeight to ensure it's drawn with its original dimensions
    ctx.drawImage(originalImg, 0, imageYOffset, imgWidth, imgHeight);

    // 3. Prepare text properties
    ctx.font = `${numFontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;
    ctx.textBaseline = "middle"; // Crucial for vertical centering based on textBaselineY

    // 4. Determine text X coordinate and set horizontal alignment
    let textX;
    // Standard textAlign values are "left", "right", "center", "start", "end"
    if (textAlign === "left" || textAlign === "start") {
        ctx.textAlign = textAlign; // Use "left" or "start"
        textX = numPadding;        // Text starts after left padding
    } else if (textAlign === "center") {
        ctx.textAlign = "center";
        textX = canvas.width / 2;  // Text is centered in the canvas width
    } else if (textAlign === "right" || textAlign === "end") {
        ctx.textAlign = textAlign; // Use "right" or "end"
        textX = canvas.width - numPadding; // Text ends before right padding
    } else {
        // Fallback for unrecognized textAlign values
        ctx.textAlign = "left"; // Default to "left"
        textX = numPadding;
    }

    // 5. Draw the text
    ctx.fillText(text, textX, textBaselineY);

    return canvas;
}