Image Of Food Products

/**
 * Adds a text label to an image. Based on the provided description "Продукты Еда" (Food Products),
 * this function defaults to adding that specific text as a semi-transparent overlay.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} [text='Продукты Еда'] The text to display on the image.
 * @param {number} [fontSize=48] The base font size in pixels. It will be scaled relative to the image width.
 * @param {string} [fontColor='#FFFFFF'] The color of the text.
 * @param {string} [position='center'] The position of the text. Supported values: 'top', 'center', 'bottom'.
 * @param {string} [backgroundColor='rgba(0, 0, 0, 0.5)'] The background color of the text label for better readability.
 * @returns {HTMLCanvasElement} A new canvas element with the original image and the text label drawn on it.
 */
function processImage(originalImg, text = 'Продукты Еда', fontSize = 48, fontColor = '#FFFFFF', position = 'center', backgroundColor = 'rgba(0, 0, 0, 0.5)') {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original 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);

    // --- Text Configuration ---

    // Make font size responsive to image width. Base size is for an 800px wide image.
    const scaledFontSize = Math.max(12, Math.round(fontSize * (w / 800)));
    ctx.font = `bold ${scaledFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Calculate text position
    let x = w / 2;
    let y = h / 2;

    switch (position) {
        case 'top':
            y = scaledFontSize;
            break;
        case 'bottom':
            y = h - scaledFontSize;
            break;
        case 'center':
        default:
            // y is already set to center
            break;
    }

    // --- Drawing ---

    // Measure text to draw a fitting background
    const textMetrics = ctx.measureText(text);
    const textWidth = textMetrics.width;
    const textHeight = scaledFontSize; // Approximation is sufficient
    const padding = textHeight * 0.3; // Padding around the text

    // Draw the semi-transparent background rectangle
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(
        x - (textWidth / 2) - padding,
        y - (textHeight / 2) - padding,
        textWidth + (padding * 2),
        textHeight + (padding * 2)
    );

    // Draw the text on top of the background
    ctx.fillStyle = fontColor;
    ctx.fillText(text, x, y);

    // Return the canvas with the final image
    return canvas;
}