Image Arabic Text Overlay Tool

async function processImage(
  originalImg,
  text = 'مرحبا بالعالم',
  fontSize = 48,
  fontColor = '#FFFFFF',
  xPosition = '95%',
  yPosition = '5%',
  textAlign = 'right',
  fontFamily = 'Noto Naskh Arabic',
  strokeColor = '#000000',
  strokeWidth = 2
) {
  /**
   * Loads a specified font from Google Fonts dynamically.
   * Caches the font in the document to avoid reloading.
   * @param {string} fontName - The name of the font to load (e.g., 'Noto Naskh Arabic').
   * @returns {Promise<string>} - A promise that resolves with the font name, or a fallback font name on error.
   */
  const loadFont = async (fontName) => {
    // Check if the font is already available to the document
    if (document.fonts.check(`1em "${fontName}"`)) {
      return fontName;
    }
    try {
      // This URL is for 'Noto Naskh Arabic'. For other fonts, the URL would need to be changed.
      const fontUrl = 'https://fonts.gstatic.com/s/notonaskharabic/v19/o-0NIpQlx3QUlC5A4Co-hH55-447dWHGCQ.woff2';
      const fontFace = new FontFace(fontName, `url(${fontUrl})`);

      // Wait for the font to be fetched and ready
      await fontFace.load();

      // Add the loaded font to the document's font set
      document.fonts.add(fontFace);
      return fontName;
    } catch (error) {
      console.error(`Failed to load font '${fontName}'. Using fallback 'Arial'.`, error);
      // As a fallback, use a generic web-safe font.
      return 'Arial';
    }
  };

  // Await the font loading before proceeding to draw.
  // The actual font name used might be the fallback if loading fails.
  const activeFontFamily = await loadFont(fontFamily);

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

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

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

  // Set up the text style properties
  ctx.font = `${fontSize}px "${activeFontFamily}"`;
  ctx.fillStyle = fontColor;
  ctx.strokeStyle = strokeColor;
  ctx.lineWidth = strokeWidth;
  ctx.textAlign = textAlign;
  ctx.textBaseline = 'top';

  // This is crucial for correct rendering of right-to-left scripts like Arabic.
  // It ensures characters and ligatures are composed correctly from right to left.
  ctx.direction = 'rtl';

  /**
   * Parses a coordinate value which can be a number or a percentage string.
   * @param {string|number} value - The coordinate value (e.g., 50, '75%').
   * @param {number} totalSize - The total size of the axis (width or height) for percentage calculation.
   * @returns {number} The calculated pixel coordinate.
   */
  const parseCoordinate = (value, totalSize) => {
    if (typeof value === 'string' && value.trim().endsWith('%')) {
      const percentage = parseFloat(value) / 100;
      return totalSize * percentage;
    }
    return parseFloat(value);
  };

  const x = parseCoordinate(xPosition, canvas.width);
  const y = parseCoordinate(yPosition, canvas.height);

  // Draw the text stroke (outline) first if a width is provided
  if (strokeWidth > 0 && strokeColor.toLowerCase() !== 'transparent') {
    ctx.strokeText(text, x, y);
  }

  // Draw the main filled text on top of the stroke
  ctx.fillText(text, x, y);

  // Return the canvas with the image and overlaid text
  return canvas;
}