Please bookmark this page to avoid losing your image tool!

No Tool Description Provided

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
function processImage(
    originalImg, 
    text = "Big Hero 6 2014 Tubi TV Jun 30 2027 1:41:52", 
    fontSize = 36, 
    textColor = "white", 
    position = "bottom-right"
) {
    // Create an off-screen canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions of the original image
    const width = originalImg.naturalWidth || originalImg.width || 800;
    const height = originalImg.naturalHeight || originalImg.height || 600;

    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Ensure fontSize is a number
    const size = Number(fontSize) || 36;

    // Configure text styling
    ctx.font = `bold ${size}px Arial, sans-serif`;
    ctx.fillStyle = textColor;
    
    // Add a black outline/shadow so the text is fully legible on any background
    ctx.shadowColor = "black";
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.lineWidth = size / 8;
    ctx.strokeStyle = 'black';

    // Measure the text for precise positioning
    const textMetrics = ctx.measureText(text);
    const textWidth = textMetrics.width;
    const padding = 20;

    let x, y;

    // Determine the x and y coordinates based on the position parameter
    switch (position.toLowerCase()) {
        case "top-left":
            x = padding;
            y = padding + size;
            break;
        case "top-right":
            x = width - textWidth - padding;
            y = padding + size;
            break;
        case "bottom-left":
            x = padding;
            y = height - padding;
            break;
        case "center":
            x = (width - textWidth) / 2;
            y = (height + size) / 2;
            break;
        case "bottom-right":
        default:
            x = width - textWidth - padding;
            y = height - padding;
            break;
    }

    // First stroke the text for the outline, then fill it
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);

    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

This tool allows users to overlay custom text onto an image. It provides options to customize the text content, font size, and text color, while automatically adding a shadow effect to ensure readability against various backgrounds. Users can also choose from several text positions, such as top-left, center, or bottom-right. This tool is useful for adding watermarks, captions, timestamps, or labels to photos and digital media.

Leave a Reply

Your email address will not be published. Required fields are marked *

Other Image Tools:

Big Hero 6 2014 Tubi Jun 30 2027 Photo

San Diego Comic-Con Image Gallery

Movie Studio Intro YTP Collab Style Image Maker

Movie Studio Music Fanfare Logo Maker

Movie Studio Music Fanfare Logo Generator

Kurdish Dubbing Audio to Image Visualizer Tool

Kurdish Dubbed Audio Video Tool

Kurdish Dub Audio to Image Converter

Kurdish Dub Audio Overlay Tool

Warner Bros Discovery Animation Studio Divisions Image Viewer

Image To Character Voice Actor Idea Generator

Image To Character Voice Actor Suggestion Tool

Image Color Adjustment Tool

Dingbats Logo Compilation Image Generator

Image Color and Opacity Adjustment Tool

The Lion King VHS Mar 3 1995 Image

The Lion King Hamtaro Character Cast Reimaginer

Audio Transcription and Identification Tool

The Lion King Hamtaro Character Role Swap Image Generator

Audio to Image Fanfare Visualizer Tool

Audio Clip of Universal Pictures Fanfares

Audio File to Image Converter

Universal Pictures Fanfare Audio Identifier

Universal Pictures Fanfare Audio Identification Tool

Universal Pictures Fanfare Audio Comparison Tool

Universal Pictures Fanfare Audio Search Tool

Universal Pictures Fanfare Audio Player

Universal Pictures David Newman Fanfare Audio Player

Universal Pictures Mar 15 2002 David Newman Fanfare Audio Player

AI Movie Trailer Generator

Anna Pavlova Experiment Photo Viewer

Image Text Overlay Tool for Russian Phrases

Photo Text Sticker Overlay Tool

Teeth Photo and Drawing Generator

Image Drawing Game Generator

No valid description provided for an image utility tool

See All →