Overview
Introduction
This tool stamps text directly onto a PNG image's pixels, entirely client-side, using a small hand-built bitmap font.
It's a lightweight way to add a caption, label, or watermark-style text overlay without needing image-editing software.
What Is PNG Text Adder?
A client-side PNG text-stamping tool that reads an uploaded image's pixel data and draws characters from a built-in 5x7 pixel font at a chosen position, color, and integer scale.
Because the drawing logic is a pure function with no DOM access, it uses its own compact bitmap font rather than the browser's font rendering.
How PNG Text Adder Works
For each supported character in the input text, the tool looks up its 5x7 pixel pattern in a built-in font table and stamps the 'on' pixels onto the image at the current cursor position, in the chosen color and scale, then advances the cursor by one glyph width plus spacing.
Unsupported characters (anything outside A-Z, 0-9, and space) are skipped but still advance the cursor, so word spacing stays visually consistent even if a character can't be drawn.
When To Use PNG Text Adder
Use it to add a simple caption, timestamp, or short label onto a screenshot, icon, or graphic asset.
It's also handy for quickly marking a batch of images with a short code or identifier.
Often used alongside PNG Watermark Adder and PNG Border Adder.
Features
Advantages
- Runs entirely client-side; the uploaded image is never sent to a server.
- No external font files or network requests — the font is fully self-contained.
- Deterministic, pixel-perfect output that's easy to unit test.
Limitations
- Only uppercase A-Z, 0-9, and space are supported; other characters are silently skipped rather than rendered.
- The built-in font is a simple blocky 5x7 pixel design, not a smooth, professional-looking typeface.
Examples
Best Practices & Notes
Best Practices
- Use a larger scale (3 or more) for text that needs to be readable at a glance, since the font is fairly blocky at scale 1.
- Choose a color with strong contrast against the image content underneath, since text pixels fully overwrite rather than blend.
Developer Notes
The font is a hand-authored Record<string, string[]> of 5x7 glyphs baked directly into the lib file (no DOM/canvas text APIs), so addTextToPng stays a pure, fully unit-testable function; the surrounding component only touches a real <canvas> to decode the upload and encode the download.
PNG Text Adder Use Cases
- Labeling a batch of screenshots with a short status word
- Adding a lightweight watermark-style caption to a graphic
- Stamping a short code or timestamp onto an exported image
Common Mistakes
- Expecting lowercase letters or punctuation to render — only uppercase A-Z, 0-9, and space are in the built-in font.
- Choosing a text color too close to the background color, making the stamped text hard to read since there's no automatic contrast/outline.
Tips
- Increase the scale for small images so the text remains legible after downloading.
- Combine with the border adder tool to add a colored bar behind the text for extra contrast.