Kurdish Dubbed Audio Video Tool

function processImage(originalImg, subtitleText = "شێرزاد سندی (Kurdish Dub)", logoText = "KURD DUB", showPlayButton = "1") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Calculate dynamic scaling for fonts and UI elements based on image size
    const subtitleFontSize = Math.max(20, Math.floor(canvas.height / 15));
    const padding = subtitleFontSize;

    // 1. Draw a cinematic subtitle line (Yellow with black stroke)
    ctx.font = `bold ${subtitleFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    const textX = canvas.width / 2;
    const textY = canvas.height - padding / 2;

    // Add a dark gradient at the bottom to ensure subtitles are readable
    const gradient = ctx.createLinearGradient(0, canvas.height - (subtitleFontSize * 3), 0, canvas.height);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.7)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, canvas.height - (subtitleFontSize * 3), canvas.width, subtitleFontSize * 3);

    // Draw the subtitle text outline
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = subtitleFontSize / 6;
    ctx.lineJoin = 'round';
    ctx.strokeText(subtitleText, textX, textY);

    // Draw the subtitle text fill
    ctx.fillStyle = '#f1c40f'; // Classic subtitle yellow
    ctx.fillText(subtitleText, textX, textY);

    // 2. Add a TV/Network Logo watermark to the top right
    const logoSize = Math.max(16, Math.floor(canvas.height / 25));
    ctx.font = `bold ${logoSize}px Arial, sans-serif`;
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';

    const logoX = canvas.width - 20;
    const logoY = 20;

    // Draw semi-transparent background for logo
    const textMetrics = ctx.measureText(logoText);
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(logoX - textMetrics.width - 10, logoY - 5, textMetrics.width + 20, logoSize + 10);

    // Draw logo text
    ctx.fillStyle = '#ffffff';
    ctx.fillText(logoText, logoX, logoY);
    
    // 3. Add a Fake "Play" button overlay if requested, giving it the "Video" look
    if (showPlayButton === "1") {
        const playBtnRadius = Math.max(30, canvas.height / 10);
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;

        // Button background
        ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
        ctx.beginPath();
        ctx.arc(centerX, centerY, playBtnRadius, 0, Math.PI * 2);
        ctx.fill();
        
        // Button border
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
        ctx.lineWidth = Math.max(3, playBtnRadius / 15);
        ctx.stroke();

        // Play triangle
        const triangleSize = playBtnRadius / 2.2;
        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
        ctx.beginPath();
        ctx.moveTo(centerX - triangleSize / 1.2, centerY - triangleSize);
        ctx.lineTo(centerX + triangleSize * 1.2, centerY);
        ctx.lineTo(centerX - triangleSize / 1.2, centerY + triangleSize);
        ctx.closePath();
        ctx.fill();
    }

    return canvas;
}