Image Regular Font Tool

/**
 * Adds text with a regular font style onto an image.
 * This function draws the provided text on top of the original image,
 * allowing customization of the text's content, size, color, and position.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} text The text to write on the image. Use '\n' for line breaks.
 * @param {number} fontSize The font size in pixels.
 * @param {string} fontFamily The font family. Defaults to 'Arial', a standard web-safe font.
 * @param {string} textColor The color of the text (e.g., '#FFFFFF', 'white').
 * @param {string} strokeColor The color of the text's outline.
 * @param {number} strokeWidth The width of the text's outline in pixels. Set to 0 for no outline.
 * @param {number} xPercent The horizontal position of the text's center, as a percentage of the image width (0-100).
 * @param {number} yPercent The vertical position of the text's center, as a percentage of the image height (0-100).
 * @returns {HTMLCanvasElement} A new canvas element with the original image and the text drawn on it.
 */
function processImage(originalImg, text = 'Your Text Here', fontSize = 48, fontFamily = 'Arial', textColor = '#FFFFFF', strokeColor = '#000000', strokeWidth = 2, xPercent = 50, yPercent = 50) {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    // Use naturalWidth/Height for images that might not have been rendered to the DOM yet
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Configure text drawing properties
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Calculate the absolute coordinates from percentage values
    const x = (xPercent / 100) * canvas.width;
    const y = (yPercent / 100) * canvas.height;

    // Split the text into lines to handle multiline text
    const lines = text.toString().split('\n');
    const lineHeight = fontSize * 1.2; // Use a line height slightly larger than the font size for spacing

    // Calculate the starting y-position to vertically center the entire text block
    const totalTextBlockHeight = (lines.length - 1) * lineHeight;
    const startY = y - totalTextBlockHeight / 2;

    // Draw each line of text
    lines.forEach((line, index) => {
        const currentY = startY + (index * lineHeight);
        
        // Draw the outline (stroke) first if a strokeWidth is provided
        if (strokeWidth > 0) {
            ctx.strokeText(line, x, currentY);
        }
        
        // Draw the filled text on top
        ctx.fillText(line, x, currentY);
    });

    // Return the final canvas element
    return canvas;
}