Image Text Overlay

How text gets "burned into" an image

When you add a caption in a photo editor, the text is not pasted on top as a separate object — it is painted directly into the pixels, so the result is a single flat image anyone can view without special software. This tool does the same thing with the browser's HTML5 Canvas. It draws your uploaded picture onto a canvas at its full native resolution, then paints each text layer on top with the canvas fillText command. When you download, the canvas is exported as a PNG — one merged image with the words permanently part of it.

Why clicking places text where it does

Click anywhere on the image and a text layer appears at that spot. There is a subtlety worth knowing: the canvas draws text from its baseline — the line letters sit on — not from the top of the characters. So the point you click becomes the bottom-left of the text, and the letters rise upward and to the right from there. If your first label sits higher than expected, that is why; click a little lower than where you want the top of the text to be.

There is also a coordinate translation happening behind the scenes. Your image might be 4000 pixels wide but displayed in a 800-pixel-wide box. The tool measures the on-screen click position and multiplies it by the ratio of true size to displayed size, so the text lands at the correct spot in the full-resolution image — not just where it looked on the shrunk preview. This keeps your downloaded PNG sharp at the original resolution.

A worked example: a readable caption

Upload a photo, click near the bottom, and a layer reading "Text" appears. In the layer panel you change the content to your caption, bump the font size, and pick white as the color. White text vanishes over bright sky, so you enable the background box. The tool measures your text's width, then draws a semi-transparent black rectangle (about 55% opacity) sized to the text plus a small padding — roughly 30% of the font size on each side — behind the words. Now the caption is legible over any background, light or dark. This is exactly the technique news captions and memes use.

Working with layers

Each piece of text is an independent layer with its own controls: content, font size (8–200px), one of several font families, color, opacity (10–100%), and the optional background box. Add as many as you like — a title at the top, a credit at the bottom, a watermark in the corner. Clicking an existing label selects it (shown by a blue outline on the canvas) instead of creating a new one, so you can come back and edit. The layer list on the side lets you select or delete any layer, and the panel updates the canvas live as you type.

Practical uses

• Memes and social posts. The classic top/bottom caption format is two text layers with background boxes off and a bold font.
• Watermarks. Add your name or site at low opacity (10–30%) in a corner to lightly mark images you publish.
• Annotations and labels. Point out parts of a diagram, screenshot, or product photo without opening heavy software.
• Quote graphics. A large centered line with a smaller attribution below makes a shareable quote card in seconds.

Practical tips

• Turn on the background box over busy photos. It is the single biggest improvement to legibility; plain text over a detailed image is hard to read at any color.
• Match font size to the real image, not the preview. A 28px default looks tiny on a 4000px photo. Because text renders at full resolution, size up generously for large images.
• Use opacity for subtlety. Full-opacity text shouts; 60–80% can sit more naturally into a photo while staying readable.
• Pick a font with weight. Impact and other heavy faces hold up against complex backgrounds far better than thin serifs.

Common mistakes

• Expecting the click point to be the top of the text. It is the baseline. Click lower than the intended top, especially for large fonts.
• Web fonts that aren't loaded. The font dropdown lists common families your system provides. A font your device lacks falls back to a default, so what you see is what you get — there is no external font download.
• Forgetting the export is always PNG. The download is lossless PNG, which keeps text edges crisp but produces larger files than JPEG for photographic content. That is the right trade for legible overlaid text.

Is my image private?

Yes. The image is read into your browser and drawn entirely on a local canvas using the Canvas API — it is never uploaded to any server. The PNG you download is generated on your device. You can confirm this by using the tool with your network disconnected; everything still works.