Image Project Creation Tool

function processImage(originalImg, projectName = "Create Your Project", projectSubtitle = "Processing Your request", theme = "light") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Define padding and layout
    const padding = Math.max(40, originalImg.width * 0.05);
    const textAreaHeight = Math.max(120, originalImg.height * 0.15);

    // Set canvas dimensions
    canvas.width = originalImg.width + (padding * 2);
    canvas.height = originalImg.height + padding + textAreaHeight;

    // Fill background color based on theme
    ctx.fillStyle = theme.toLowerCase() === 'dark' ? '#1e1e2d' : '#f4f6f8';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Add card/frame background for the image
    ctx.fillStyle = theme.toLowerCase() === 'dark' ? '#2a2a3b' : '#ffffff';
    ctx.shadowColor = theme.toLowerCase() === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.1)';
    ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 10;
    
    // Draw white/dark backboard behind the image for a 'polaroid/card' effect
    ctx.fillRect(padding / 2, padding / 2, originalImg.width + padding, originalImg.height + padding);

    // Draw the image
    ctx.drawImage(originalImg, padding, padding, originalImg.width, originalImg.height);

    // Reset shadow for text drawing
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Dynamically scale font size based on canvas width to ensure it fits well
    const titleFontSize = Math.max(24, Math.min(80, canvas.width / 20));
    const subFontSize = Math.max(16, titleFontSize * 0.5);

    const mainTextColor = theme.toLowerCase() === 'dark' ? '#ffffff' : '#2d3748';
    const subTextColor = theme.toLowerCase() === 'dark' ? '#a0aec0' : '#718096';

    const textX = padding;
    const titleY = originalImg.height + (padding * 1.5) + titleFontSize;
    const subY = titleY + (subFontSize * 1.5);

    // Draw Project Title
    ctx.fillStyle = mainTextColor;
    ctx.font = `bold ${titleFontSize}px "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
    ctx.fillText(projectName, textX, titleY);

    // Draw Project Subtitle
    ctx.fillStyle = subTextColor;
    ctx.font = `normal ${subFontSize}px "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
    ctx.fillText(projectSubtitle, textX, subY);

    // Optional: Draw a small badge or decorative line
    ctx.fillStyle = '#3182ce'; // A nice blue accent
    ctx.fillRect(textX, originalImg.height + (padding * 1.5) - (titleFontSize * 0.8), titleFontSize * 2, titleFontSize * 0.15);

    return canvas;
}