Web Address Topic Identifier Tool Creator

function processImage(originalImg, webAddress = "https://www.example.com", topic = "General Topic", theme = "dark", addWatermark = "yes") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.width;
    const height = originalImg.height;

    // Calculate proportional padding and footer size based on the image bounds
    const padding = Math.max(20, Math.floor(width * 0.05));
    const bottomBanner = Math.max(60, Math.floor(width * 0.12));
    
    // Setup canvas dimensions
    canvas.width = width + padding * 2;
    canvas.height = height + padding + bottomBanner;

    const isDark = theme.toLowerCase() !== "light";
    
    // Draw background
    ctx.fillStyle = isDark ? '#121212' : '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Prepare shadow for the main image to make it stand out
    ctx.shadowColor = isDark ? 'rgba(0, 0, 0, 0.8)' : 'rgba(0, 0, 0, 0.3)';
    ctx.shadowBlur = padding * 0.8;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = padding * 0.3;
    
    // Draw the main image onto the canvas
    ctx.drawImage(originalImg, padding, padding, width, height);
    
    // Reset shadow logic for the remaining elements
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Add an optional watermark inside the boundaries of the image
    if (addWatermark.toLowerCase() === "yes" || addWatermark === "1" || addWatermark.toLowerCase() === "true") {
        ctx.save();
        ctx.beginPath();
        ctx.rect(padding, padding, width, height);
        ctx.clip();
        
        const watermarkFontSize = Math.max(20, Math.floor(width * 0.08));
        ctx.font = `bold ${watermarkFontSize}px Arial, sans-serif`;
        ctx.fillStyle = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Translate and rotate to stamp a diagonal watermark
        ctx.translate(padding + width / 2, padding + height / 2);
        ctx.rotate(-Math.PI / 6);
        ctx.fillText(webAddress, 0, 0);
        ctx.restore();
    }
    
    // Setup identifiers at the bottom area (footer)
    const textCenterY = padding + height + bottomBanner * 0.55;
    const topicFontSize = Math.max(14, Math.floor(bottomBanner * 0.35));
    const urlFontSize = Math.max(12, Math.floor(bottomBanner * 0.25));

    // Draw the "Topic" identifier
    ctx.fillStyle = isDark ? '#ffffff' : '#000000';
    ctx.font = `bold ${topicFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText(`Topic: ${topic}`, padding, textCenterY);

    // Draw the "Web Address" identifier
    ctx.fillStyle = isDark ? '#58a6ff' : '#0969da';
    ctx.font = `${urlFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'right';
    ctx.fillText(webAddress, canvas.width - padding, textCenterY);

    // Draw a neat aesthetic divider line above the texts
    ctx.beginPath();
    ctx.moveTo(padding, padding + height + bottomBanner * 0.15);
    ctx.lineTo(canvas.width - padding, padding + height + bottomBanner * 0.15);
    ctx.strokeStyle = isDark ? '#30363d' : '#d0d7de';
    ctx.lineWidth = Math.max(1, Math.floor(bottomBanner * 0.02));
    ctx.stroke();

    return canvas;
}