function processImage(
originalImg,
text = "Big Hero 6 2014 Tubi Jun 30 2027",
fontSize = 48,
textColor = "#FFFFFF",
accentColor = "#F54228" // Tubi-inspired orange accent
) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the original image
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// Make font size responsive to image width (prevents text from being too huge on small images)
let actualFontSize = fontSize;
if (canvas.width < 1000) {
actualFontSize = Math.max(16, Math.floor(canvas.width / 25));
}
// Configure text styling
ctx.font = `bold ${actualFontSize}px "Arial", sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Calculate dimensions for the bottom banner
const padding = actualFontSize * 0.6;
const bannerHeight = actualFontSize + (padding * 2);
const bannerY = canvas.height - bannerHeight;
// Draw semi-transparent black background for readability
ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
ctx.fillRect(0, bannerY, canvas.width, bannerHeight);
// Draw an accent line on top of the banner
ctx.fillStyle = accentColor;
ctx.fillRect(0, bannerY, canvas.width, Math.max(2, actualFontSize * 0.1));
// Add a slight shadow to make the text pop
ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
// Draw the actual text centered in the banner
ctx.fillStyle = textColor;
const textX = canvas.width / 2;
const textY = bannerY + (bannerHeight / 2);
ctx.fillText(text, textX, textY);
return canvas;
}This tool allows users to overlay custom text onto an image using a professional-looking banner. It automatically generates a semi-transparent dark background strip at the bottom of the image, complete with a customizable accent line, to ensure the text remains highly legible regardless of the image background. This is useful for creating movie-style title cards, adding informative captions to photos, or generating promotional graphics for social media and digital content.