Image Logo Creator With Label Boundary Process

/**
 * Creates a logo from an image by adding a text label below it and a boundary around the entire composition.
 *
 * @param {Image} originalImg The original image object to use as the base of the logo.
 * @param {string} [labelText='My Logo'] The text to display below the image.
 * @param {string} [font='Arial'] The font family for the label text.
 * @param {number} [fontSize=30] The font size in pixels for the label text.
 * @param {string} [textColor='#000000'] The color of the label text.
 * @param {string} [boundaryColor='#000000'] The color of the boundary border.
 * @param {number} [boundaryWidth=5] The width in pixels of the boundary border.
 * @returns {HTMLCanvasElement} A canvas element containing the final logo.
 */
function processImage(originalImg, labelText, font, fontSize, textColor, boundaryColor, boundaryWidth) {
    // 1. Set default values for parameters
    labelText = labelText || 'My Logo';
    font = font || 'Arial';
    fontSize = Number(fontSize) || 30;
    textColor = textColor || '#000000';
    boundaryColor = boundaryColor || '#000000';
    boundaryWidth = Number(boundaryWidth) || 5;

    // 2. Calculate dimensions for the new canvas
    const textHeight = fontSize;
    // Add some padding between the image and the text for better spacing
    const textPadding = textHeight / 2; 

    const canvasWidth = originalImg.width + 2 * boundaryWidth;
    const canvasHeight = originalImg.height + textPadding + textHeight + 2 * boundaryWidth;

    // 3. Create canvas and get 2D rendering context
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');
    
    // Optional: Fill background with white if transparency is not desired
    // ctx.fillStyle = '#FFFFFF';
    // ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 4. Draw the boundary rectangle
    if (boundaryWidth > 0) {
        ctx.strokeStyle = boundaryColor;
        ctx.lineWidth = boundaryWidth;
        // To ensure the full border width is visible inside the canvas area,
        // we offset the drawing coordinates by half the line width.
        ctx.strokeRect(
            boundaryWidth / 2,
            boundaryWidth / 2,
            canvasWidth - boundaryWidth,
            canvasHeight - boundaryWidth
        );
    }

    // 5. Draw the original image onto the canvas
    const imageX = boundaryWidth;
    const imageY = boundaryWidth;
    ctx.drawImage(originalImg, imageX, imageY);

    // 6. Draw the text label below the image
    ctx.font = `${textHeight}px ${font}`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';   // Center horizontally
    ctx.textBaseline = 'middle'; // Center vertically

    const textX = canvasWidth / 2;
    // Calculate vertical position to be centered in the space below the image
    const textY = imageY + originalImg.height + textPadding + (textHeight / 2);

    ctx.fillText(labelText, textX, textY);

    // 7. Return the final canvas element
    return canvas;
}