Ukrainian Dubbed Video Voice Actor Information Tool

function processImage(
    originalImg, 
    actorName = "Андрій Твердак", 
    characterName = "Брюс Вейн", 
    studio = "Дубляж: Master-Video Ukraine"
) {
    // Create canvas and set its dimensions to match the original image
    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 onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Calculate scale factors based on image dimensions to keep overlays proportional
    const scale = Math.max(0.5, width / 800);
    const barHeight = Math.min(height * 0.3, 140 * scale);
    const barY = height - barHeight;

    // --- Draw the Lower Third Information Bar ---
    
    // Draw semi-transparent dark background for readability
    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
    ctx.fillRect(0, barY, width, barHeight);
    
    // Aesthetic subtle top border for the bar
    ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
    ctx.fillRect(0, barY, width, 2 * Math.max(1, scale));

    // Draw Ukrainian flag motif indicator on the left side
    const flagWidth = 14 * scale;
    ctx.fillStyle = "#0057B7"; // Ukrainian Blue
    ctx.fillRect(0, barY, flagWidth, barHeight / 2);
    ctx.fillStyle = "#FFDD00"; // Ukrainian Yellow
    ctx.fillRect(0, barY + barHeight / 2, flagWidth, barHeight / 2);

    // --- Draw the Text Elements ---
    const paddingLeft = flagWidth + 24 * scale;
    
    // Set up text shadows for extra pop
    ctx.shadowColor = "rgba(0, 0, 0, 0.9)";
    ctx.shadowBlur = 4 * scale;
    ctx.shadowOffsetX = 2 * scale;
    ctx.shadowOffsetY = 2 * scale;

    // Draw Character Name
    const charFontSize = Math.floor(40 * scale);
    ctx.fillStyle = "#FFFFFF";
    ctx.font = `bold ${charFontSize}px "Segoe UI", Arial, sans-serif`;
    ctx.textAlign = "left";
    ctx.textBaseline = "bottom";
    ctx.fillText(characterName, paddingLeft, barY + barHeight * 0.45);

    // Draw Actor Name
    const actorFontSize = Math.floor(26 * scale);
    ctx.fillStyle = "#FFDD00"; // Matches the yellow of the flag
    ctx.font = `${actorFontSize}px "Segoe UI", Arial, sans-serif`;
    ctx.textBaseline = "top";
    ctx.fillText("Голос: " + actorName, paddingLeft, barY + barHeight * 0.52);

    // Draw Studio / Dubbing Information on the right
    const studioFontSize = Math.floor(18 * scale);
    ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
    ctx.font = `italic ${studioFontSize}px "Segoe UI", Arial, sans-serif`;
    ctx.textAlign = "right";
    ctx.textBaseline = "bottom";
    ctx.fillText(studio, width - 20 * scale, height - 15 * scale);

    return canvas;
}