Website Favicon And Logo PNG Generator Tool

function processImage(originalImg, size = 512, backgroundColor = "transparent", padding = 5, cornerRadius = 0) {
    // Clean and clamp parameters
    const targetSize = Math.max(16, Number(size) || 512); // Standard sizes like 16, 32, 64, 192, 512
    const paddingPercent = Math.max(0, Math.min(45, Number(padding) || 0)); // Limit padding up to 45%
    const radiusPercent = Math.max(0, Math.min(50, Number(cornerRadius) || 0)); // 0 = square, 50 = circle

    const canvas = document.createElement('canvas');
    canvas.width = targetSize;
    canvas.height = targetSize;
    const ctx = canvas.getContext('2d');

    // Apply corner radius (clipping mask for the logo/favicon base)
    if (radiusPercent > 0) {
        // Calculate corner radius in pixels
        const radiusPx = (targetSize / 2) * (radiusPercent / 50);
        
        ctx.beginPath();
        ctx.moveTo(radiusPx, 0);
        ctx.lineTo(targetSize - radiusPx, 0);
        ctx.quadraticCurveTo(targetSize, 0, targetSize, radiusPx);
        ctx.lineTo(targetSize, targetSize - radiusPx);
        ctx.quadraticCurveTo(targetSize, targetSize, targetSize - radiusPx, targetSize);
        ctx.lineTo(radiusPx, targetSize);
        ctx.quadraticCurveTo(0, targetSize, 0, targetSize - radiusPx);
        ctx.lineTo(0, radiusPx);
        ctx.quadraticCurveTo(0, 0, radiusPx, 0);
        ctx.closePath();
        ctx.clip();
    }

    // Apply background color if it's not set to transparent
    const bg = backgroundColor.trim().toLowerCase();
    if (bg !== 'transparent' && bg !== 'rgba(0,0,0,0)' && bg !== 'rgba(0, 0, 0, 0)') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, targetSize, targetSize);
    }

    // Calculate maximum available area for the image, applying the padding safe-zone
    const paddingPx = (paddingPercent / 100) * targetSize;
    const drawableSize = targetSize - (paddingPx * 2);

    // Calculate the scale to fit the image perfectly within the bounding box
    const scale = Math.min(
        drawableSize / originalImg.width, 
        drawableSize / originalImg.height
    );
    
    const drawWidth = originalImg.width * scale;
    const drawHeight = originalImg.height * scale;

    // Horizontally and vertically center the image in the canvas
    const x = (targetSize - drawWidth) / 2;
    const y = (targetSize - drawHeight) / 2;

    // Render the original image onto the canvas
    ctx.drawImage(originalImg, x, y, drawWidth, drawHeight);

    return canvas;
}