Add Text to Image

What the canvas is doing behind the preview

The file you drop in is decoded and painted onto a canvas at its native pixel size. A 4032 x 3024 photo from a phone camera produces a 4032 x 3024 canvas. The page shrinks that to fit your screen with CSS, but the export is always written at the original resolution, so nothing is downsampled just because the preview is small.

Every text layer is drawn into that same full-size canvas. When you add a layer, its starting font size is the image height divided by twelve, rounded, with a floor of 16 px. On the 3024 px tall photo above, that first caption arrives at 252 px. The size slider then runs from 8 px to 240 px, which means on very large photos you are usually dialling the default down rather than up.

Text is always drawn at weight 700, so everything comes out bold. Each layer is anchored at its centre point both horizontally and vertically, which is worth knowing when you drag: you are positioning the middle of the caption, not its top left corner. Rotation spins the layer around that same centre.

Tick Outline and the stroke is drawn underneath the fill at a width of the font size divided by twelve, never thinner than 2 px, with rounded corners. A 240 px caption therefore gets a 20 px outline, which is what makes white-on-black meme lettering readable over a busy photo.

Three jobs this handles well

Annotating a screenshot. Monospace at 36 to 48 px in bright red with a black outline stays legible over grey interface chrome. Add one layer per callout and drag each beside the thing it points at.

A light watermark across listing photos. Set opacity to about 0.18, rotation to -30 degrees, white fill with a black outline. The outline is what keeps a low-opacity watermark visible over both dark and pale areas of a photo.

A title card or quote graphic. Impact or Georgia at a large size near the top third, then a smaller credit line as a second layer underneath. Two layers, two different sizes, one drag each.

Honest limits

Each layer is a single line. There is no word wrap and pressing Enter in the text box does nothing useful, so a three-line caption means three layers lined up by eye. That is fine for short text and painful for a paragraph.

The clickable area for selecting a layer is an upright rectangle built from the text width before rotation. Rotate a layer sharply and the grab zone no longer sits where the glyphs appear, so aim for the centre of the text or select it from the layer list instead.

There is no undo, no way to reorder layers (they stack in the order you created them), no drop shadow, no letter spacing and no curved text. Fonts come from system stacks, which means Impact and Comic Sans render on most Windows and macOS machines but fall back to a generic face on many Android and Linux devices. If the look matters, check the export on the device you will publish from.

JPG export flattens everything onto white at a fixed quality of 0.92 with no slider. PNG is lossless and keeps any transparency from the source file. Very large source images, say a 48 megapixel photo, hold several hundred megabytes of uncompressed pixel data in memory, and a phone browser may reload the tab rather than finish the export. Shrinking the photo first avoids that.

When a different tool suits better

For top and bottom caption bars in the classic format, the meme maker is quicker because the layout is already built. To trim the photo before lettering it, use crop image. To blur out a name or number rather than cover it with text, use pixelate image, since text sitting on top can be moved away in an editor while pixelated pixels are genuinely gone. To change the finished file to WebP, run it through the image converter.

Questions people ask

Can I put two lines of text in one layer?

No. Each layer renders one line, and a line break in the text box will not create a second row. Add a separate layer for each line and drag them so the vertical spacing looks even.

Will the blue selection box appear in my download?

No. The selection outline is cleared and the canvas is redrawn before the file is encoded, so only your image and the text itself are saved.

Why does Impact look wrong on my phone?

The font list uses system font stacks rather than downloaded web fonts. If Impact or Comic Sans is not installed on that device, the browser substitutes a default sans-serif, so the same layer can look different on a phone and a desktop.

How do I make a faint watermark that still reads?

Drop the opacity slider to roughly 0.15 to 0.25, turn on the outline in a contrasting colour, and rotate the layer so it crosses the image diagonally. The outline gives it an edge over both bright sky and dark shadow.

What compression does the JPG export use?

A fixed quality of 0.92, which is high enough that text edges stay clean on most photos. Pick PNG if you need lossless output or your source has transparent areas.