Image Joke Generator

function processImage(originalImg, topText = "ШУТКА СМЕШНАЯ", bottomText = "СИТУАЦИЯ СТРАШНАЯ") {
    // Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Match image dimensions
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Initial font size configuration
    let fontSize = Math.max(20, Math.floor(canvas.height / 8));
    const padding = Math.max(10, canvas.width * 0.02);
    const maxWidth = canvas.width - padding * 2;

    // Ensure the longest single word can fit on the screen without getting cut off
    const allWords = `${topText} ${bottomText}`.toUpperCase().split(/\s+/);
    
    while (fontSize > 10) {
        ctx.font = `bold ${fontSize}px Impact, 'Arial Black', sans-serif`;
        let maxWordWidth = 0;
        
        for(let word of allWords) {
            if (word) {
                maxWordWidth = Math.max(maxWordWidth, ctx.measureText(word).width);
            }
        }
        
        if (maxWordWidth <= maxWidth) {
            break;
        }
        fontSize -= 2; // Scale down
    }

    // Apply finalized styling settings
    ctx.font = `bold ${fontSize}px Impact, 'Arial Black', sans-serif`;
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = Math.max(2, Math.floor(fontSize / 12));
    ctx.textAlign = 'center';
    ctx.lineJoin = 'round';
    ctx.textBaseline = 'middle';

    const lineHeight = fontSize * 1.15;
    const centerX = canvas.width / 2;

    // Helper function to handle text wrapping and drawing
    function drawMemeText(text, isTop) {
        if (!text || text.trim() === "") return;

        const words = text.toUpperCase().trim().split(/\s+/);
        const lines = [];
        let currentLine = words[0] || "";

        // Calculate lines based on available canvas width
        for (let i = 1; i < words.length; i++) {
            const word = words[i];
            const width = ctx.measureText(currentLine + " " + word).width;
            
            if (width < maxWidth) {
                currentLine += " " + word;
            } else {
                lines.push(currentLine);
                currentLine = word;
            }
        }
        if (currentLine) lines.push(currentLine);

        // Draw each line vertically aligned depending on top or bottom position
        const totalTextHeight = lines.length * lineHeight;
        let startY = isTop 
            ? padding + (fontSize / 2) 
            : canvas.height - padding - totalTextHeight + (fontSize / 2);

        for (let j = 0; j < lines.length; j++) {
            const lineY = startY + (j * lineHeight);
            
            // Draw black outline followed by white text pour meme effect
            ctx.strokeText(lines[j], centerX, lineY);
            ctx.fillText(lines[j], centerX, lineY);
        }
    }

    // Apply texts
    drawMemeText(topText, true);
    drawMemeText(bottomText, false);

    return canvas;
}