Image Problem Resolution Assistance

/**
 * Adds a meme-style Russian text caption to an image.
 * The text is a rhyming couplet: "Если проблема мешает жить, Мастеру Вите пора звонить!"
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} [fontColor='#FFFFFF'] The color of the text.
 * @param {string} [strokeColor='#000000'] The color of the text outline.
 * @param {string} [fontFamily='Impact, Arial Black, sans-serif'] The font family for the text.
 * @returns {HTMLCanvasElement} A new canvas element with the image and text drawn on it.
 */
function processImage(originalImg, fontColor = '#FFFFFF', strokeColor = '#000000', fontFamily = 'Impact, Arial Black, sans-serif') {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

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

    // --- Prepare Text ---
    const line1 = 'Если проблема мешает жить,';
    const line2 = 'Мастеру Вите пора звонить!';

    // --- Auto-size Font ---
    // Start with a large font size and decrease until the text fits
    let fontSize = Math.floor(width / 10);
    const padding = width * 0.05; // 5% horizontal padding
    const maxWidth = width - (padding * 2);

    // Function to measure text width for a given font size
    const measureTextWidth = (text, size) => {
        ctx.font = `bold ${size}px ${fontFamily}`;
        return ctx.measureText(text).width;
    };

    // Determine which line is longer to base our font size on it
    // Check initial width with a dummy font setting
    ctx.font = `bold ${fontSize}px ${fontFamily}`;
    const longerLine = ctx.measureText(line1).width > ctx.measureText(line2).width ? line1 : line2;

    // Reduce font size until the longest line fits within the max width
    while (measureTextWidth(longerLine, fontSize) > maxWidth && fontSize > 10) {
        fontSize--;
    }

    // --- Apply Final Text Style ---
    ctx.font = `bold ${fontSize}px ${fontFamily}`;
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.textAlign = 'center';
    // Stroke width scales with font size for a consistent look
    ctx.lineWidth = Math.max(1, Math.floor(fontSize / 15));

    // --- Draw Top Text ---
    const x1 = width / 2;
    const y1 = height * 0.05; // Position 5% from the top
    ctx.textBaseline = 'top';
    // Draw stroke (outline) then fill
    ctx.strokeText(line1, x1, y1);
    ctx.fillText(line1, x1, y1);

    // --- Draw Bottom Text ---
    const x2 = width / 2;
    const y2 = height * 0.95; // Position 5% from the bottom
    ctx.textBaseline = 'bottom';
    // Draw stroke (outline) then fill
    ctx.strokeText(line2, x2, y2);
    ctx.fillText(line2, x2, y2);

    // Return the final canvas element
    return canvas;
}