Image Title Mashup Idea Generator

function processImage(
  originalImg,
  prefixes = "Cyber,Neon,Ninja,Quantum,Turbo,Robo,Cosmic,Lunar,Mecha,Steampunk,Gothic,Astro,Bio,Crystal,Shadow,Retro,Holo,Chrono",
  suffixes = "Samurai,Pirate,Knight,Wizard,Dragon,Cyborg,Phantom,Vampire,Assassin,Nomad,Raider,Walker,Mage,Beast,Hunter,Monk,Sniper,Guardian",
  subtitles = "Returns,Awakening,Reborn,Unleashed,Chronicles,Legacy,Protocol,Syndicate,Uprising,Origins,Endgame,Reckoning",
  bgColor = "#111111",
  textColor = "#F5D300"
) {
  // Parse inputs into arrays
  const prefixArr = prefixes.split(',').map(s => s.trim()).filter(Boolean);
  const suffixArr = suffixes.split(',').map(s => s.trim()).filter(Boolean);
  const subtitleArr = subtitles.split(',').map(s => s.trim()).filter(Boolean);

  // Helper to pick a random element
  const getRandom = (arr) => arr[Math.floor(Math.random() * arr.length)];
  
  // Generate the random mashup idea
  const prefix = getRandom(prefixArr) || "Mega";
  const suffix = getRandom(suffixArr) || "Entity";
  const subtitle = getRandom(subtitleArr) || "The Movie";

  const titleText = `${prefix} ${suffix}`;
  const subTitleText = `The ${subtitle}`;

  // Set up the canvas
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const width = originalImg.width;
  // Calculate a reasonable banner height based on image size but maintain a minimum so text is readable
  const bannerHeight = Math.max(140, Math.floor(Math.max(width, originalImg.height) * 0.15));
  const height = originalImg.height + bannerHeight;

  canvas.width = width;
  canvas.height = height;

  // 1. Draw banner background
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, width, height);

  // 2. Draw original image at the top
  ctx.drawImage(originalImg, 0, 0, width, originalImg.height);

  // 3. Draw a separator line
  ctx.strokeStyle = textColor;
  ctx.lineWidth = 4;
  ctx.beginPath();
  ctx.moveTo(0, originalImg.height);
  ctx.lineTo(width, originalImg.height);
  ctx.stroke();

  // 4. Configure shadows for text to give it a "Movie Poster" feel
  ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
  ctx.shadowOffsetX = 3;
  ctx.shadowOffsetY = 3;
  ctx.shadowBlur = 5;

  // 5. Draw the main Mashup Title
  const titleFontSize = Math.floor(bannerHeight * 0.35);
  ctx.font = `bold ${titleFontSize}px "Impact", "Arial Black", sans-serif`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = textColor;
  
  // Constrain max width so long texts don't run off-screen
  const maxTextWidth = width * 0.9;
  ctx.fillText(
    titleText.toUpperCase(), 
    width / 2, 
    originalImg.height + bannerHeight * 0.4, 
    maxTextWidth
  );

  // 6. Draw the Subtitle
  const subFontSize = Math.floor(bannerHeight * 0.18);
  ctx.font = `italic ${subFontSize}px "Trebuchet MS", "Lucida Sans Unicode", sans-serif`;
  ctx.fillStyle = '#FFFFFF';
  
  ctx.fillText(
    subTitleText.toUpperCase(), 
    width / 2, 
    originalImg.height + bannerHeight * 0.75, 
    maxTextWidth
  );

  return canvas;
}