function processImage(
originalImg,
nameText = "John Doe",
addressText = "123 Main St, Cityville, ST 12345",
startX = 50,
startY = 50,
fontSize = 32,
fontColor = "#FFFFFF",
hasShadow = "true"
) {
// Create a canvas
const canvas = document.createElement("canvas");
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const ctx = canvas.getContext("2d");
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// Parse numeric inputs
const x = Number(startX);
const y = Number(startY);
const size = Number(fontSize);
// Configure text styles
ctx.font = `bold ${size}px Arial, sans-serif`;
ctx.fillStyle = fontColor;
ctx.textBaseline = "top";
// Add shadow if requested for better text visibility over varied backgrounds
if (String(hasShadow).toLowerCase() === "true") {
ctx.shadowColor = "rgba(0, 0, 0, 0.7)";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
}
// Draw the Name
ctx.fillText(nameText, x, y);
// Draw the Address (placed below the name with some line-height spacing)
const lineHeight = size * 1.4;
ctx.fillText(addressText, x, y + lineHeight);
return canvas;
}The Image Name and Address Editor allows you to overlay personalized text, such as a name and an address, directly onto an image. You can customize the text content, positioning, font size, and color, and even apply a text shadow to ensure readability against different backgrounds. This tool is useful for creating personalized digital assets, such as custom profile pictures, digital ID previews, or personalized greeting cards and labels.