New Class Monitor Image Generator

function processImage(originalImg, topOrTitleText = "НОВАЯ СТАРОСТА", bottomOrSubtitleText = "", style = "demotivator") {
    // Fallback to default style if an invalid one is provided
    if (style !== 'demotivator' && style !== 'impact') {
        style = 'demotivator';
    }
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    if (style === 'demotivator') {
        // Demotivator style proportions relative to the image size
        const padding = Math.max(20, Math.floor(originalImg.width * 0.1));
        const borderOffset = Math.max(3, Math.floor(originalImg.width * 0.012));
        const width = originalImg.width + padding * 2;
        
        // Calculate dynamic font sizes based on total width
        let titleFontSize = Math.max(24, Math.floor(width * 0.08));
        ctx.font = `${titleFontSize}px "Times New Roman", Times, serif`;
        
        let titleWidth = ctx.measureText(topOrTitleText).width;
        const maxTitleWidth = width - padding * 1.5;
        
        // Scale down title if it overflows
        while (titleWidth > maxTitleWidth && titleFontSize > 12) {
            titleFontSize -= 2;
            ctx.font = `${titleFontSize}px "Times New Roman", Times, serif`;
            titleWidth = ctx.measureText(topOrTitleText).width;
        }
        
        const titleHeight = titleFontSize;
        
        // Scale and measure subtitle
        let subFontSize = Math.max(16, Math.floor(titleFontSize * 0.45));
        let subHeight = bottomOrSubtitleText ? subFontSize : 0;
        
        if (bottomOrSubtitleText) {
            ctx.font = `${subFontSize}px Arial, sans-serif`;
            let subWidth = ctx.measureText(bottomOrSubtitleText).width;
            while (subWidth > maxTitleWidth && subFontSize > 10) {
                subFontSize -= 1;
                ctx.font = `${subFontSize}px Arial, sans-serif`;
                subWidth = ctx.measureText(bottomOrSubtitleText).width;
            }
            subHeight = subFontSize + (titleFontSize * 0.4); 
        }
        
        // Final canvas height calculations
        const imgBottom = padding + originalImg.height;
        const textStartY = imgBottom + borderOffset + padding * 0.5;
        const bottomSpace = (textStartY - imgBottom) + titleHeight + subHeight + padding;
        
        const height = imgBottom + bottomSpace;
        
        canvas.width = width;
        canvas.height = height;
        
        // Draw black background
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, width, height);
        
        // Draw original image
        ctx.drawImage(originalImg, padding, padding, originalImg.width, originalImg.height);
        
        // Draw white inset border
        ctx.strokeStyle = '#ffffff';
        ctx.lineWidth = Math.max(1, Math.floor(originalImg.width * 0.003));
        ctx.strokeRect(
            padding - borderOffset, 
            padding - borderOffset, 
            originalImg.width + borderOffset * 2, 
            originalImg.height + borderOffset * 2
        );
        
        // Draw Texts
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        
        ctx.font = `${titleFontSize}px "Times New Roman", Times, serif`;
        ctx.fillStyle = '#ffffff';
        ctx.fillText(topOrTitleText, width / 2, textStartY);
        
        if (bottomOrSubtitleText) {
            ctx.font = `${subFontSize}px Arial, sans-serif`;
            ctx.fillStyle = '#cccccc';
            ctx.fillText(bottomOrSubtitleText, width / 2, textStartY + titleFontSize + (titleFontSize * 0.2));
        }
        
    } else {
        // Classic Impact Meme Style
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        ctx.drawImage(originalImg, 0, 0);
        
        const drawMemeText = (text, isTop) => {
            if (!text) return;
            
            let fontSize = Math.max(20, Math.floor(canvas.height * 0.15));
            ctx.font = `bold ${fontSize}px Impact, sans-serif`;
            
            let textWidth = ctx.measureText(text).width;
            const maxWidth = canvas.width * 0.95;
            
            while (textWidth > maxWidth && fontSize > 10) {
                fontSize -= 2;
                ctx.font = `bold ${fontSize}px Impact, sans-serif`;
                textWidth = ctx.measureText(text).width;
            }
            
            ctx.fillStyle = 'white';
            ctx.strokeStyle = 'black';
            ctx.lineWidth = Math.max(2, Math.floor(fontSize * 0.05));
            ctx.textAlign = 'center';
            ctx.textBaseline = isTop ? 'top' : 'bottom';
            
            const x = canvas.width / 2;
            const y = isTop ? 10 : canvas.height - 10;
            
            ctx.strokeText(text, x, y);
            ctx.fillText(text, x, y);
        };
        
        drawMemeText(topOrTitleText, true);
        drawMemeText(bottomOrSubtitleText, false);
    }
    
    return canvas;
}