Image Logo Maker

function processImage(
    originalImg,
    logoText = "MY LOGO",
    shape = "circle", // "circle", "square", "rounded"
    textPosition = "bottom", // "top", "bottom", "center", "none"
    borderWidth = 15,
    borderColor = "#2c3e50",
    textColor = "#ffffff",
    textOutlineColor = "#000000",
    fontFamily = "Arial, Helvetica, sans-serif"
) {
    // Coerce numeric inputs
    borderWidth = Number(borderWidth);

    // Setup canvas
    const canvas = document.createElement("canvas");
    const size = 600; // Logos are typically square, setting a fixed 600x600 size
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext("2d");

    // Calculation variables
    const cx = size / 2;
    const cy = size / 2;
    const padding = borderWidth / 2;
    const radius = cx - padding;
    const boxSize = size - borderWidth;

    // Helper to draw a rounded rectangle
    const drawRoundedRect = (x, y, w, h, r) => {
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + h - r);
        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
        ctx.lineTo(x + r, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.closePath();
    };

    // Helper to form the chosen shape path
    const drawShape = () => {
        if (shape === "circle") {
            ctx.beginPath();
            ctx.arc(cx, cy, radius, 0, Math.PI * 2);
            ctx.closePath();
        } else if (shape === "rounded") {
            drawRoundedRect(padding, padding, boxSize, boxSize, radius * 0.4);
        } else { // Square
            ctx.beginPath();
            ctx.rect(padding, padding, boxSize, boxSize);
            ctx.closePath();
        }
    };

    ctx.save();
    
    // Create the path for the shape and clip the canvas
    drawShape();
    ctx.clip();

    // Fill background (useful if the uploaded image has transparency)
    ctx.fillStyle = "#ffffff";
    ctx.fill();

    // Calculate dimensions to maintain aspect ratio (Object-fit: cover)
    const iw = originalImg.width;
    const ih = originalImg.height;
    const scale = Math.max(size / iw, size / ih);
    const sw = iw * scale;
    const sh = ih * scale;
    const ox = (size - sw) / 2;
    const oy = (size - sh) / 2;

    // Draw original image covering the whole shape
    ctx.drawImage(originalImg, ox, oy, sw, sh);

    // Restore to unclip the canvas so we can safely draw borders and text
    ctx.restore();

    // Draw the border
    if (borderWidth > 0) {
        drawShape();
        ctx.lineWidth = borderWidth;
        ctx.strokeStyle = borderColor;
        ctx.stroke();
    }

    // Add Logo Text
    if (textPosition !== "none" && logoText.trim().length > 0) {
        // Base Font size setup
        let fontSize = Math.floor(size * 0.13); // ~78px
        ctx.font = `900 ${fontSize}px ${fontFamily}`;
        
        // Dynamically scale down font if text is too long
        const maxWidth = size * 0.8;
        const textMetrics = ctx.measureText(logoText);
        if (textMetrics.width > maxWidth) {
            fontSize = Math.floor(fontSize * (maxWidth / textMetrics.width));
            ctx.font = `900 ${fontSize}px ${fontFamily}`;
        }

        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

        let tx = cx;
        let ty = cy;

        const verticalMargin = fontSize * 0.8;

        // Position text configuration
        if (textPosition === "top") {
            ty = padding + verticalMargin;
            if (shape === "circle") ty += verticalMargin * 0.4;
        } else if (textPosition === "bottom") {
            ty = size - padding - verticalMargin;
            if (shape === "circle") ty -= verticalMargin * 0.4;
        }

        // Add heavy stroke for high readability on messy backgrounds
        ctx.lineWidth = Math.max(3, fontSize * 0.18);
        ctx.lineJoin = "round";
        ctx.strokeStyle = textOutlineColor;
        ctx.strokeText(logoText, tx, ty);

        // Fill inner text
        ctx.fillStyle = textColor;
        ctx.fillText(logoText, tx, ty);
    }

    return canvas;
}