Image Verb Reference Tool

/**
 * Creates a reference image by overlaying a verb (text) on the original image.
 * This is useful for creating flashcards or visual learning aids, for example, for Russian verbs ("Глаголы").
 *
 * @param {HTMLImageElement} originalImg The original image object.
 * @param {string} verbText The verb or text to display on the image. Defaults to "читать" (to read).
 * @param {number} fontSize The font size of the text in pixels.
 * @param {string} fontFamily A web-safe or Google Font that supports the characters in verbText (especially Cyrillic).
 * @param {string} textColor The color of the text (e.g., "#FFFFFF").
 * @param {string} strokeColor The color of the text's outline for better readability.
 * @param {number} strokeWidth The width of the text's outline in pixels.
 * @param {string} position Vertical position of the text. Can be "top", "center", or "bottom".
 * @param {string} textAlign Horizontal alignment of the text. Can be "left", "center", or "right".
 * @returns {HTMLCanvasElement} A new canvas element with the image and text drawn on it.
 */
async function processImage(
  originalImg,
  verbText = "читать",
  fontSize = 60,
  fontFamily = "Arial",
  textColor = "#FFFFFF",
  strokeColor = "#000000",
  strokeWidth = 4,
  position = "bottom",
  textAlign = "center"
) {
  // Create a new canvas element
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  // Set canvas dimensions to match the source image
  canvas.width = originalImg.naturalWidth;
  canvas.height = originalImg.naturalHeight;

  // Draw the original image onto the canvas to serve as the background
  ctx.drawImage(originalImg, 0, 0);

  // --- Configure Text Style ---
  // Set the font style. Using 'bold' makes it stand out more.
  ctx.font = `bold ${fontSize}px ${fontFamily}`;
  ctx.fillStyle = textColor;
  ctx.strokeStyle = strokeColor;
  ctx.lineWidth = strokeWidth;

  // --- Calculate Text Position ---
  let x, y;
  // A small margin to prevent the text from touching the canvas edges
  const margin = fontSize * 0.3;

  // 1. Calculate the horizontal (X) position based on textAlign
  ctx.textAlign = textAlign;
  if (textAlign === "left") {
    x = margin;
  } else if (textAlign === "right") {
    x = canvas.width - margin;
  } else { // "center" is the default
    x = canvas.width / 2;
  }

  // 2. Calculate the vertical (Y) position based on position
  if (position === "top") {
    ctx.textBaseline = "top";
    y = margin;
  } else if (position === "center") {
    ctx.textBaseline = "middle";
    y = canvas.height / 2;
  } else { // "bottom" is the default
    ctx.textBaseline = "bottom";
    y = canvas.height - margin;
  }

  // --- Draw the Text ---
  // To create a clean outline, we draw the stroke (outline) first...
  ctx.strokeText(verbText, x, y);
  // ...and then draw the fill color on top of it.
  ctx.fillText(verbText, x, y);

  // Return the completed canvas element
  return canvas;
}