No Image Result

function processImage(originalImg, text = "No Image Result", subText = "Song lyric mp3 download", bgColor = "#1e293b", textColor = "#94a3b8") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine dimensions: use originalImg dimensions if available, otherwise default to a square (typical for album art)
    const width = (originalImg && originalImg.width > 0) ? originalImg.width : 500;
    const height = (originalImg && originalImg.height > 0) ? originalImg.height : 500;

    canvas.width = width;
    canvas.height = height;

    // Fill background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, width, height);

    // Center coordinates
    const cx = width / 2;
    const cy = height / 2;

    // Calculate a responsive scale unit based on canvas size
    const scale = Math.min(width, height);

    // Layout configuration
    const iconCenterY = cy - scale * 0.1;
    const iconRadius = scale * 0.15;

    // 1. Draw a placeholder icon (Stylized Vinyl/Disk/Album Art)
    ctx.beginPath();
    ctx.arc(cx, iconCenterY, iconRadius, 0, 2 * Math.PI);
    ctx.lineWidth = scale * 0.015;
    ctx.strokeStyle = textColor;
    ctx.stroke();

    // Inner hole of the disk
    ctx.beginPath();
    ctx.arc(cx, iconCenterY, iconRadius * 0.25, 0, 2 * Math.PI);
    ctx.stroke();

    // Music note inside the disk
    ctx.fillStyle = textColor;
    ctx.beginPath();
    
    // Note head
    const noteX = cx - scale * 0.015;
    const noteY = iconCenterY + scale * 0.03;
    ctx.arc(noteX, noteY, scale * 0.03, 0, 2 * Math.PI);
    ctx.fill();
    
    // Note stem
    ctx.fillRect(noteX + scale * 0.015, noteY - scale * 0.12, scale * 0.015, scale * 0.12);
    
    // Note flag
    ctx.beginPath();
    ctx.moveTo(noteX + scale * 0.03, noteY - scale * 0.12);
    ctx.bezierCurveTo(
        noteX + scale * 0.08, noteY - scale * 0.12,
        noteX + scale * 0.08, noteY - scale * 0.05,
        noteX + scale * 0.03, noteY - scale * 0.05
    );
    ctx.lineWidth = scale * 0.012;
    ctx.stroke();

    // 2. Format and Draw Texts
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Main text ("No Image Result")
    const mainFontSize = scale * 0.06;
    ctx.font = `bold ${mainFontSize}px Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
    ctx.fillText(text, cx, iconCenterY + iconRadius + scale * 0.1);

    // Sub text ("Song lyric mp3 download")
    const subFontSize = scale * 0.035;
    ctx.font = `${subFontSize}px Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`;
    
    // Make subtext slightly more transparent to differentiate hierarchy
    ctx.globalAlpha = 0.6;
    ctx.fillText(subText, cx, iconCenterY + iconRadius + scale * 0.1 + mainFontSize + scale * 0.02);
    ctx.globalAlpha = 1.0;

    // 3. Draw a subtle inner border for polish
    ctx.strokeStyle = "rgba(255, 255, 255, 0.05)";
    ctx.lineWidth = Math.max(2, scale * 0.01);
    ctx.strokeRect(ctx.lineWidth / 2, ctx.lineWidth / 2, width - ctx.lineWidth, height - ctx.lineWidth);

    return canvas;
}