YouTube Video Title Renamer Based On URL Tool

function processImage(originalImg, newTitle = "Переименованное Видео (Автодубляж)", videoUrl = "https://youtu.be/example", language = "Русский", showTorrentBadge = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Draw original image as the background thumbnail
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Add dark gradients at the top and bottom to ensure text readability
    const topGradient = ctx.createLinearGradient(0, 0, 0, height * 0.4);
    topGradient.addColorStop(0, 'rgba(0, 0, 0, 0.85)');
    topGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
    ctx.fillStyle = topGradient;
    ctx.fillRect(0, 0, width, height * 0.4);

    const bottomGradient = ctx.createLinearGradient(0, height, 0, height * 0.6);
    bottomGradient.addColorStop(0, 'rgba(0, 0, 0, 0.85)');
    bottomGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
    ctx.fillStyle = bottomGradient;
    ctx.fillRect(0, height * 0.6, width, height);

    // Helper function to draw rounded rectangles
    function fillRoundRect(context, x, y, w, h, radius) {
        context.beginPath();
        context.moveTo(x + radius, y);
        context.lineTo(x + w - radius, y);
        context.quadraticCurveTo(x + w, y, x + w, y + radius);
        context.lineTo(x + w, y + h - radius);
        context.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
        context.lineTo(x + radius, y + h);
        context.quadraticCurveTo(x, y + h, x, y + h - radius);
        context.lineTo(x, y + radius);
        context.quadraticCurveTo(x, y, x + radius, y);
        context.closePath();
        context.fill();
    }

    // 1. Render the New Emulated Title
    ctx.fillStyle = '#FFFFFF';
    ctx.font = `bold ${Math.max(20, height * 0.06)}px Arial, sans-serif`;
    ctx.textBaseline = 'top';
    ctx.fillText(newTitle, width * 0.03, height * 0.03);

    // 2. Render the "Based on URL" Text
    ctx.fillStyle = '#CCCCCC';
    ctx.font = `${Math.max(14, height * 0.035)}px Arial, sans-serif`;
    ctx.fillText(`URL: ${videoUrl}`, width * 0.03, height * 0.03 + height * 0.07);

    // 3. Render the Auto-Dubbing Language Badge
    const badgeText = `🗣 Дублировано: ${language}`;
    ctx.font = `bold ${Math.max(12, height * 0.035)}px Arial, sans-serif`;
    const badgeWidth = ctx.measureText(badgeText).width + 20;
    const badgeHeight = height * 0.06;
    
    ctx.fillStyle = '#FF0000'; // YouTube Red
    fillRoundRect(ctx, width * 0.03, height * 0.03 + height * 0.12, badgeWidth, badgeHeight, 5);
    
    ctx.fillStyle = '#FFFFFF';
    ctx.textBaseline = 'middle';
    ctx.fillText(badgeText, width * 0.03 + 10, height * 0.03 + height * 0.12 + badgeHeight / 2);

    // 4. Render "Download Torrent" Button (if enabled)
    if (Number(showTorrentBadge) === 1) {
        const torrentText = "⬇ СКАЧАТЬ TОРРЕНТ"; // "Download Torrent" in Russian
        ctx.font = `bold ${Math.max(16, height * 0.04)}px Arial, sans-serif`;
        const tWidth = ctx.measureText(torrentText).width + 30;
        const tHeight = height * 0.08;
        
        ctx.fillStyle = '#4CAF50'; // Magnet/Torrent Green
        fillRoundRect(ctx, width - tWidth - width * 0.03, height - tHeight - height * 0.03, tWidth, tHeight, 8);
        
        ctx.fillStyle = '#FFFFFF';
        ctx.fillText(torrentText, width - tWidth - width * 0.03 + 15, height - tHeight / 2 - height * 0.03);
    }

    // 5. Draw the Central Video Play Button Overlay
    const playBtnWidth = width * 0.15;
    const playBtnHeight = playBtnWidth * 0.7;
    const centerX = width / 2;
    const centerY = height / 2;
    
    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
    fillRoundRect(ctx, centerX - playBtnWidth / 2, centerY - playBtnHeight / 2, playBtnWidth, playBtnHeight, playBtnHeight * 0.2);
    
    ctx.fillStyle = '#FFFFFF';
    ctx.beginPath();
    ctx.moveTo(centerX - playBtnWidth * 0.15, centerY - playBtnHeight * 0.25);
    ctx.lineTo(centerX + playBtnWidth * 0.25, centerY);
    ctx.lineTo(centerX - playBtnWidth * 0.15, centerY + playBtnHeight * 0.25);
    ctx.closePath();
    ctx.fill();

    return canvas;
}