Image Caption Generator For Animated Themes

async function processImage(
  originalImg,
  captionText = 'Мы родом из мультиков',
  fontSize = 60,
  fontColor = 'yellow',
  strokeColor = '#003399',
  strokeWidth = 8,
  position = 'bottom'
) {
  let fontFamily = 'Arial'; // Fallback font

  try {
    // Dynamically load a cartoon-style font from Google Fonts
    const fontName = 'Luckiest Guy';
    const fontUrl = `https://fonts.gstatic.com/s/luckiestguy/v18/K2FufZ1s2GN-lHPg3ztvoBeq1w1q_08.woff2`;
    
    // Check if the font is already loaded to avoid redundant loading
    if (!document.fonts.check(`1em "${fontName}"`)) {
        const font = new FontFace(fontName, `url(${fontUrl})`);
        // Wait for the font to be loaded
        await font.load();
        // Add the font to the document's font set
        document.fonts.add(font);
        // Wait until it's ready to be used by the canvas
        await document.fonts.ready;
    }
    fontFamily = fontName;
  } catch (error) {
    console.warn(`Could not load custom font. Falling back to ${fontFamily}. Error:`, error);
  }

  // Create a canvas element
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Set canvas dimensions to match the original image
  const imgWidth = originalImg.naturalWidth;
  const imgHeight = originalImg.naturalHeight;
  canvas.width = imgWidth;
  canvas.height = imgHeight;

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

  // --- Text Styling ---

  // Make font size responsive to image width, but not larger than the max `fontSize`
  const responsiveFontSize = Math.min(imgWidth / 10, parseFloat(fontSize));
  
  // Set font properties
  ctx.font = `bold ${responsiveFontSize}px "${fontFamily}", sans-serif`;
  ctx.fillStyle = fontColor;
  ctx.strokeStyle = strokeColor;
  ctx.lineWidth = Math.max(1, strokeWidth); // Ensure line width is at least 1
  
  // Improve stroke appearance
  ctx.lineJoin = 'round';
  ctx.miterLimit = 2;
  
  // Set text alignment
  ctx.textAlign = 'center';

  // --- Text Positioning ---
  
  const x = imgWidth / 2;
  let y;

  // Add a small margin from the edge
  const margin = responsiveFontSize * 0.2;

  switch (position.toLowerCase()) {
    case 'top':
      ctx.textBaseline = 'top';
      y = margin;
      break;
    case 'center':
      ctx.textBaseline = 'middle';
      y = imgHeight / 2;
      break;
    case 'bottom':
    default:
      ctx.textBaseline = 'bottom';
      y = imgHeight - margin;
      break;
  }

  // --- Draw the Text ---
  // Draw the text stroke (outline) first
  ctx.strokeText(captionText, x, y);
  // Then draw the filled text on top
  ctx.fillText(captionText, x, y);

  // Return the canvas element with the image and caption
  return canvas;
}