Image Pet Dinosaur Effect Adder

function processImage(
    originalImg,
    dinosaurType = "sauropod",
    position = "bottom-right",
    petName = "Rex",
    leashColor = "#FF4500",
    dinoScalePercentage = 30
) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    // Match the canvas size to the original image size
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image as the background
    ctx.drawImage(originalImg, 0, 0);

    // Map dinosaur type to the corresponding emoji
    const dTypeStr = String(dinosaurType).toLowerCase().trim();
    let emoji = "🦕"; // Default to sauropod
    if (dTypeStr === "trex" || dTypeStr === "t-rex") emoji = "🦖";
    else if (dTypeStr === "dragon") emoji = "🐉";
    else if (dTypeStr === "crocodile") emoji = "🐊";

    // Calculate dimensions
    const minDim = Math.min(canvas.width, canvas.height);
    const dinoSize = minDim * (Number(dinoScalePercentage) / 100);

    // Set font to ensure best compatibility with colored emojis across different OS
    ctx.font = `${dinoSize}px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif`;
    ctx.textBaseline = "bottom";
    const emWidth = ctx.measureText(emoji).width;

    const isLeft = String(position).toLowerCase() === "bottom-left";

    // Determine X and Y bounds for the dinosaur
    const dinoX = isLeft ? canvas.width * 0.05 : canvas.width * 0.95 - emWidth;
    const dinoY = canvas.height * 0.95;

    // Calculate leash attachment point (approximate center/neck of the dinosaur emoji)
    // Sauropods and T-Rex face left natively in most emoji sets.
    const attachOffX = isLeft ? emWidth * 0.6 : emWidth * 0.4;
    const leashTargetX = dinoX + attachOffX;
    const leashTargetY = dinoY - dinoSize * 0.55;

    // --- Draw Leash ---
    ctx.beginPath();
    const startX = canvas.width / 2;
    const startY = canvas.height; // starting from bottom center
    ctx.moveTo(startX, startY);
    
    // Create a sagging curve to simulate gravity pulling on a loose leash
    const cpX = (startX + leashTargetX) / 2;
    const cpY = Math.max(startY, leashTargetY) - minDim * 0.05;
    ctx.quadraticCurveTo(cpX, cpY, leashTargetX, leashTargetY);
    
    ctx.lineWidth = Math.max(2, minDim * 0.01);
    ctx.strokeStyle = String(leashColor);
    ctx.lineCap = "round";
    ctx.stroke();

    // --- Draw Dinosaur ---
    ctx.save();
    if (isLeft) {
        // Flip horizontally so the dinosaur faces towards the center (right)
        ctx.translate(dinoX + emWidth / 2, dinoY);
        ctx.scale(-1, 1);
        ctx.fillText(emoji, -emWidth / 2, 0);
    } else {
        // Naturally faces left 
        ctx.fillText(emoji, dinoX, dinoY);
    }
    ctx.restore();

    // --- Draw Collar Ring ---
    ctx.beginPath();
    ctx.arc(leashTargetX, leashTargetY, minDim * 0.015, 0, Math.PI * 2);
    ctx.fillStyle = String(leashColor);
    ctx.fill();
    ctx.lineWidth = Math.max(1, minDim * 0.005);
    ctx.strokeStyle = "#FFD700"; // Gold trim
    ctx.stroke();

    // --- Prepare Name Tag ---
    const tagFontSize = Math.max(12, minDim * 0.035);
    ctx.font = `bold ${tagFontSize}px Arial`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    const tagText = String(petName);
    const textMetrics = ctx.measureText(tagText);
    const paddingX = tagFontSize * 0.8;
    const paddingY = tagFontSize * 0.4;
    const tagW = textMetrics.width + paddingX * 2;
    const tagH = tagFontSize + paddingY * 2;

    const tagX = dinoX + emWidth / 2;
    const tagY = dinoY - dinoSize - tagH * 0.5;
    
    const tx = tagX - tagW / 2;
    const ty = tagY - tagH / 2;
    
    // Draw wire holding the name tag to the collar
    ctx.beginPath();
    ctx.moveTo(tagX, ty + tagH);
    ctx.lineTo(leashTargetX, leashTargetY);
    ctx.lineWidth = Math.max(1, minDim * 0.003);
    ctx.strokeStyle = "silver";
    ctx.stroke();

    // Custom Rounded Rectangle for the Name Tag 
    ctx.fillStyle = "#FFC107"; // Goldish-yellow
    const r = tagH / 2; // Making it fully pill-shaped
    
    ctx.beginPath();
    ctx.moveTo(tx + r, ty);
    ctx.lineTo(tx + tagW - r, ty);
    ctx.quadraticCurveTo(tx + tagW, ty, tx + tagW, ty + r);
    ctx.lineTo(tx + tagW, ty + tagH - r);
    ctx.quadraticCurveTo(tx + tagW, ty + tagH, tx + tagW - r, ty + tagH);
    ctx.lineTo(tx + r, ty + tagH);
    ctx.quadraticCurveTo(tx, ty + tagH, tx, ty + tagH - r);
    ctx.lineTo(tx, ty + r);
    ctx.quadraticCurveTo(tx, ty, tx + r, ty);
    ctx.closePath();
    ctx.fill();
    
    ctx.lineWidth = Math.max(1, tagFontSize * 0.1);
    ctx.strokeStyle = "#B8860B"; // Dark goldenrod border
    ctx.stroke();

    // --- Draw Tag Text with Shadow ---
    ctx.fillStyle = "rgba(0,0,0,0.4)";
    ctx.fillText(tagText, tagX + 1, tagY + 1); // Drop shadow
    ctx.fillStyle = "#333333";
    ctx.fillText(tagText, tagX, tagY); // Main text

    return canvas;
}