Image Name Official Tool

function processImage(originalImg, name = "John Doe", stampText = "OFFICIAL", stampColor = "rgba(220, 40, 40, 0.8)", rotationDegrees = -15) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Configure stamp sizing based on image dimensions
    const fontSize = Math.max(24, Math.floor(canvas.width / 12));
    ctx.fillStyle = stampColor;
    ctx.strokeStyle = stampColor;
    ctx.lineWidth = Math.max(2, fontSize / 12);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    ctx.save();
    
    // Move to the center of the canvas and apply rotation for a "stamped" look
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate((parseFloat(rotationDegrees) * Math.PI) / 180);
    
    // Set primary font for the "OFFICIAL" text
    ctx.font = `900 ${fontSize}px "Courier New", Courier, monospace`;
    
    // Measure texts to calculate bounding box dimensions
    const stampTextWidth = ctx.measureText(stampText).width;
    
    ctx.font = `bold italic ${fontSize * 0.75}px "Courier New", Courier, monospace`;
    const nameTextWidth = ctx.measureText(name).width;
    
    const padding = fontSize * 0.8;
    const stampWidth = Math.max(stampTextWidth, nameTextWidth) + padding * 3;
    const stampHeight = fontSize * 2.8;
    
    const x = -stampWidth / 2;
    const y = -stampHeight / 2;
    
    // Draw the outer rectangular border
    ctx.beginPath();
    ctx.rect(x, y, stampWidth, stampHeight);
    ctx.stroke();
    
    // Draw the inner rectangular border (creates a classic double-border rubber stamp effect)
    const innerPadding = ctx.lineWidth * 2.5;
    ctx.beginPath();
    ctx.rect(
        x + innerPadding, 
        y + innerPadding, 
        stampWidth - innerPadding * 2, 
        stampHeight - innerPadding * 2
    );
    ctx.stroke();
    
    // Draw the main "OFFICIAL" text
    ctx.font = `900 ${fontSize}px "Courier New", Courier, monospace`;
    ctx.fillText(stampText, 0, -fontSize * 0.5);
    
    // Draw the variable name text below it
    ctx.font = `bold italic ${fontSize * 0.75}px "Courier New", Courier, monospace`;
    ctx.fillText(name, 0, fontSize * 0.6);
    
    // Draw a separating line between the text lines
    ctx.beginPath();
    ctx.moveTo(-stampWidth * 0.35, 0);
    ctx.lineTo(stampWidth * 0.35, 0);
    ctx.stroke();
    
    ctx.restore();
    
    // Return the processed canvas
    return canvas;
}