Image Success Secret Generator

function processImage(originalImg, title = "СЕКРЕТ УСПЕХА", subtitle = "прост: нужно всего лишь...", bgColor = "#000000", textColor = "#ffffff", borderColor = "#ffffff") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Make sure input is string
    title = String(title);
    subtitle = String(subtitle);

    // Max display dimensions for the original image
    const MAX_W = 800;
    const MAX_H = 600;
    let dw = originalImg.width;
    let dh = originalImg.height;

    // Scale the image down while keeping aspect ratio if it's too large
    if (dw > MAX_W || dh > MAX_H) {
        const ratio = Math.min(MAX_W / dw, MAX_H / dh);
        dw *= ratio;
        dh *= ratio;
    }

    // Dynamic layout paddings based on image size
    const paddingLeftRight = Math.max(50, dw * 0.1);
    const paddingTop = Math.max(40, dh * 0.1);

    const canvasWidth = dw + paddingLeftRight * 2;
    
    // Dynamic font sizing
    const titleFontSize = Math.max(30, Math.floor(canvasWidth / 12));
    const subFontSize = Math.max(16, Math.floor(canvasWidth / 25));
    
    // Accommodate multiple lines for subtitle by allocating enough bottom space
    const paddingBottom = titleFontSize + (subFontSize * 5) + 70;

    canvas.width = canvasWidth;
    canvas.height = dh + paddingTop + paddingBottom;

    // Fill background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw the main image in the center horizontally
    const imgX = (canvas.width - dw) / 2;
    const imgY = paddingTop;
    ctx.drawImage(originalImg, imgX, imgY, dw, dh);

    // Draw the classic "demotivator" thin border around the image
    const borderGap = 4;
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = Math.max(1, Math.floor(canvas.width / 400));
    ctx.strokeRect(imgX - borderGap, imgY - borderGap, dw + borderGap * 2, dh + borderGap * 2);

    const centerX = canvas.width / 2;

    // Draw Title (Demotivator format usually uses a Serif font like Times New Roman)
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.font = `Normal ${titleFontSize}px "Times New Roman", Times, serif`;
    const titleY = imgY + dh + Math.max(30, titleFontSize * 0.8);
    ctx.fillText(title, centerX, titleY);

    // Setup for Subtitle (Usually a sans-serif font)
    ctx.font = `Normal ${subFontSize}px Arial, sans-serif`;
    const maxWidth = canvas.width - (paddingLeftRight * 1.5);
    const subtitleY = titleY + titleFontSize + 15;
    
    // Word wrap logic for the subtitle
    const words = subtitle.split(' ');
    let line = '';
    let currentY = subtitleY;
    const lineHeight = subFontSize * 1.3;
    
    for (let n = 0; n < words.length; n++) {
        const testLine = line + words[n] + ' ';
        const metrics = ctx.measureText(testLine);
        if (metrics.width > maxWidth && n > 0) {
            ctx.fillText(line.trim(), centerX, currentY);
            line = words[n] + ' ';
            currentY += lineHeight;
        } else {
            line = testLine;
        }
    }
    // Draw the remaining text
    ctx.fillText(line.trim(), centerX, currentY);

    // Optionally crop the extra bottom space if the subtitle was short
    const finalHeight = currentY + lineHeight + 30;
    
    // Create a final cropped canvas to avoid too much empty space at the bottom
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = canvas.width;
    finalCanvas.height = finalHeight;
    const finalCtx = finalCanvas.getContext('2d');
    finalCtx.fillStyle = bgColor;
    finalCtx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
    finalCtx.drawImage(canvas, 0, 0);

    return finalCanvas;
}