Ukrainian Dub Master Video Voice Actor Information Tool

function processImage(originalImg, actorName = 'Mykola Dubovyk', roleName = 'Protagonist', studioText = 'Master-Video Ukraine Dub') {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    
    // Draw the original image
    ctx.drawImage(originalImg, 0, 0);

    // Calculate lower third dimensions for the information overlay
    // Height will scale proportionally but cap between 80px and 250px
    const boxHeight = Math.max(80, Math.min(250, height * 0.25));
    const boxY = height - boxHeight;

    // Draw dark gradient background for text readability
    const gradient = ctx.createLinearGradient(0, boxY, 0, height);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0.4)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.95)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, boxY, width, boxHeight);

    // Draw Ukrainian flag accent stripe on the left edge
    const stripeWidth = Math.max(8, width * 0.02);
    ctx.fillStyle = '#0057b7'; // Ukrainian Blue
    ctx.fillRect(0, boxY, stripeWidth, boxHeight / 2);
    ctx.fillStyle = '#ffd700'; // Ukrainian Yellow
    ctx.fillRect(0, boxY + boxHeight / 2, stripeWidth, boxHeight / 2);

    const paddingLeft = stripeWidth + Math.max(15, width * 0.03);
    const maxLeftTextWidth = width - paddingLeft - (width * 0.3); // Leave room for studio text on the right

    // Draw Voice Actor Name
    const primaryFontSize = Math.floor(boxHeight * 0.35);
    ctx.font = `bold ${primaryFontSize}px "Segoe UI", "Helvetica Neue", Arial, sans-serif`;
    ctx.fillStyle = '#ffffff';
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.fillText(actorName, paddingLeft, boxY + boxHeight * 0.15, maxLeftTextWidth);

    // Draw Character / Role Name
    const secondaryFontSize = Math.floor(boxHeight * 0.18);
    ctx.font = `italic ${secondaryFontSize}px "Segoe UI", "Helvetica Neue", Arial, sans-serif`;
    ctx.fillStyle = '#dddddd';
    ctx.fillText(`Voice of: ${roleName}`, paddingLeft, boxY + boxHeight * 0.55, maxLeftTextWidth);

    // Draw Studio Information (Master-Video Ukraine) on the bottom right
    const tertiaryFontSize = Math.floor(boxHeight * 0.15);
    ctx.font = `bold ${tertiaryFontSize}px "Segoe UI", "Helvetica Neue", Arial, sans-serif`;
    ctx.fillStyle = '#ffd700'; // Match the yellow accent
    ctx.textAlign = 'right';
    const paddingRight = Math.max(15, width * 0.03);
    const maxRightTextWidth = width * 0.4;
    
    ctx.fillText(
        studioText.toUpperCase(), 
        width - paddingRight, 
        boxY + boxHeight * 0.75, 
        maxRightTextWidth
    );

    return canvas;
}