Image Verbs Reference Guide

/**
 * Creates an "Image Verbs Reference Guide" by combining an image with a list of related verbs.
 * The output is a canvas element that presents the image on one side and a titled list of verbs on the other.
 * Numbered markers can be placed on the image to correspond with the verb list.
 *
 * @param {Image} originalImg The original image object to use as the base.
 * @param {string} verbs A comma-separated string of verbs to list (e.g., "to run, to jump, to sing").
 * @param {string} title The title for the reference guide.
 * @param {string} positions A comma-separated string of x,y coordinates for placing numbered markers on the image. Each pair of numbers corresponds to a verb in the list (e.g., "x1,y1,x2,y2").
 * @param {string} fontColor The color of the text as a hex code.
 * @param {string} backgroundColor The background color of the canvas as a hex code.
 * @param {number} fontSize The font size in pixels for the verb list.
 * @returns {HTMLCanvasElement} A canvas element displaying the final guide.
 */
function processImage(
    originalImg,
    verbs = 'to see, to wear, to think',
    title = 'Verbs | Глаголы',
    positions = '150,80,100,200,250,90',
    fontColor = '#333333',
    backgroundColor = '#F5F5F5',
    fontSize = 20
) {
    // 1. Parse parameters
    const verbList = verbs.split(',').map(v => v.trim()).filter(v => v);
    const posCoordsRaw = positions.split(',').map(p => Number(p.trim())).filter(p => !isNaN(p));
    const posCoords = [];
    for (let i = 0; i < posCoordsRaw.length; i += 2) {
        if (posCoordsRaw[i + 1] !== undefined) {
            posCoords.push({ x: posCoordsRaw[i], y: posCoordsRaw[i + 1] });
        }
    }

    // 2. Define layout constants
    const padding = 30;
    const textAreaWidth = 350;
    const titleFontSize = Math.round(fontSize * 1.5);
    const labelRadius = 15;
    const labelFontSize = 16;
    const lineHeight = fontSize * 1.5;

    // 3. Create canvas and context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 4. Set canvas dimensions
    const imgW = originalImg.width;
    const imgH = originalImg.height;

    canvas.width = padding + imgW + padding + textAreaWidth + padding;

    // Estimate text height to adjust canvas height
    const titleHeight = titleFontSize + padding;
    const listHeight = verbList.length * lineHeight;
    const estimatedTextHeight = titleHeight + listHeight;
    canvas.height = padding + Math.max(imgH, estimatedTextHeight) + padding;

    // 5. Draw background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 6. Draw image
    const imgX = padding;
    const imgY = padding;
    ctx.drawImage(originalImg, imgX, imgY, imgW, imgH);

    // 7. Draw text (title and verbs)
    const textX = padding + imgW + padding;
    let currentY = padding;

    // Draw Title
    ctx.fillStyle = fontColor;
    ctx.font = `bold ${titleFontSize}px Arial`;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText(title, textX, currentY);

    // Draw Verbs list
    currentY += titleFontSize + padding; // Add space after the title

    verbList.forEach((verb, index) => {
        let textToDraw = verb;

        // Check if there's a position for this verb to draw a marker
        if (index < posCoords.length) {
            textToDraw = `${index + 1}. ${verb}`;
            const labelPos = posCoords[index];

            // Clamp label position to be within the image bounds
            const labelX = imgX + Math.max(labelRadius, Math.min(imgW - labelRadius, labelPos.x));
            const labelY = imgY + Math.max(labelRadius, Math.min(imgH - labelRadius, labelPos.y));

            // Draw circle marker
            ctx.beginPath();
            ctx.arc(labelX, labelY, labelRadius, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
            ctx.fill();
            ctx.strokeStyle = fontColor;
            ctx.lineWidth = 2;
            ctx.stroke();

            // Draw number inside the circle
            ctx.fillStyle = fontColor;
            ctx.font = `bold ${labelFontSize}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(String(index + 1), labelX, labelY + 1); // +1 for better vertical centering
        }

        // Draw the verb text in the list on the right panel
        ctx.font = `${fontSize}px Arial`;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        ctx.fillStyle = fontColor;
        ctx.fillText(textToDraw, textX, currentY);

        currentY += lineHeight; // Move Y for the next line
    });

    // 8. Return the final canvas
    return canvas;
}