/**
* Overlays centered, customizable blue text onto an image.
*
* @param {Image} originalImg The original image object to process.
* @param {string} [text='Big man Too'] The text content to display on the image.
* @param {string} [textColor='blue'] The color of the text. Per the description, the tool is for "blue text", so the default is blue, but other colors are allowed for customization.
* @param {number} [textSize=48] The font size of the text in pixels.
* @returns {HTMLCanvasElement} A new canvas element with the image and centered text drawn on it.
*/
function processImage(originalImg, text = 'Big man Too', textColor = 'blue', textSize = 48) {
// Create a new canvas element to draw on.
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set the canvas dimensions to match the intrinsic dimensions of the original image.
canvas.width = originalImg.naturalWidth;
canvas.height = originalImg.naturalHeight;
// Draw the original image as the background of the canvas.
ctx.drawImage(originalImg, 0, 0);
// Configure the text properties for drawing.
// We use a common, web-safe font family.
ctx.font = `${textSize}px Arial`;
ctx.fillStyle = textColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Calculate the horizontal and vertical center of the canvas.
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// Draw the specified text onto the center of the canvas.
ctx.fillText(text, centerX, centerY);
// Return the final canvas element.
return canvas;
}The Image Customizable Blue Text Centering Tool allows users to overlay centered text onto an image with customizable options. Users can specify the text content, select different text colors (with blue as the default), and adjust the font size. This tool is ideal for creating personalized images for social media posts, invitations, or any occasion where adding a message to a visual is desired. The resulting image can be easily shared or downloaded for various uses.