Putting words on a picture sounds trivial until you actually need to do it once. A design program is overkill for a single caption, and most online tools that promise to add text to a photo ask you to create an account, watch an advert load, or upload the file to a server before you ever see the result. None of that is necessary for something a browser can already do with a single canvas call.
Everything happens locally. The image is decoded on your device, the text is drawn onto a canvas with the browser's own font rendering engine, and the flattened result is encoded as PNG without a single byte leaving your machine. A screenshot with a private label, a product photo with a price sticker or a personal photo with a caption never has to touch a server to get the text it needs.
What this add text to image tool actually draws
Under the hood there is exactly one drawing primitive doing the work: the canvas text API. The photo is drawn onto a canvas at its full resolution first, then the caption is drawn on top of it with fillText, using whatever font, size and colour you have chosen. Because both the photo and the text live on the same canvas, the export is a single flattened image rather than a photo with a separate text layer, which is exactly what you want when the destination is a message, a listing or a social post rather than another editing session.
The nine point position grid maps directly onto the canvas coordinate system. Each of the nine buttons sets a horizontal anchor of left, centre or right and a vertical anchor of top, middle or bottom, and the tool works out the exact pixel offset and text alignment needed to sit the caption in that corner, edge or centre with a consistent margin around it.
Choosing a font, size and colour that read clearly
The font list sticks to typefaces that are installed on effectively every desktop and mobile operating system, because a canvas can only render a font that the visiting browser already has available. Sans serif faces such as Arial and Verdana stay legible at small sizes and on busy backgrounds, while a serif face such as Georgia reads as more editorial for a quote or a caption under a photograph.
Size is set as a percentage of the image width rather than a fixed pixel count, so the same setting produces a proportionally correct caption whether the source photo is a 400 pixel thumbnail or a 6000 pixel camera photo. Somewhere between 4 and 8 percent suits a short caption on most photographs, while a single bold word placed centrally can go considerably larger.
Colour is the setting people get wrong most often. White text disappears against a bright sky, and black text disappears against a shadow. If the background under the text varies, a colour with strong contrast against the darkest and lightest parts of that region, or a short line of extra padding behind the text, keeps the caption readable everywhere it lands.
Using the nine point position grid
Corners suit short labels and watermarks, because they stay out of the main subject of a photograph. The centre position suits a single word or short phrase meant to be the point of the image, such as a sign or a title card. The three edge positions, top centre, bottom centre and the two side centres, work well for a caption that needs the full width of the photo to read comfortably.
- Top left or top right for a small label or a date stamp.
- Bottom left or bottom right for a credit line or a watermark.
- Bottom centre for a classic caption sitting under the main subject.
- Dead centre for a single bold word or short title placed over the image.
- Top centre when the lower half of the photo is already visually busy.
Three canvas primitives behind this add text to image tool: decode, draw, encode
Three browser primitives cover the entire job. The File and Image APIs decode the photo you selected into pixels, the 2D canvas context draws those pixels and then the text on top of them in a single pass, and canvas.toBlob encodes the flattened result back into a PNG file. There is no server anywhere in that chain, which is why the tool works offline once the page has loaded and never asks for a login.
PNG is the fixed output format because the source photo can already contain transparency, and re encoding a transparent PNG as JPEG would silently fill those transparent pixels with black. Keeping PNG as the only export path means a logo with a transparent background keeps that transparency after the caption is added, with no extra setting required.
Common uses for adding text to a photo
Sellers photographing items for a marketplace listing use it to stamp a size, a price or a sold notice directly onto the photo, which survives being copied or screenshotted in a way that a separate text description does not. Teachers and presenters label diagrams and screenshots without opening a full graphics editor for a single word. Anyone building a simple quote card or an announcement image can type the line, pick a bold centred position and download something ready to post within a few seconds.
People searching for a way to put text on image online usually just need one of these quick jobs done, not a full editing suite, which is why a single page focused on the task beats a general purpose editor for speed. The same applies to anyone who wants to caption a photo online for a listing, a slide or a social post without installing anything.
This is also a lightweight text overlay for images that need a heading, a label or a short instruction burned into the picture itself, such as a screenshot used in documentation or a diagram shared in a chat.
How to add text to an image
- 1
Add your photo
Drag an image onto the drop area or click it to choose a PNG, JPG or WebP file from your device.
- 2
Type your caption
Enter the words you want on the photo. A line break starts a new line of text.
- 3
Pick a font, size and colour
Choose a font family, set the size as a percentage of image width, and pick a colour with enough contrast against the photo.
- 4
Choose a position
Click one of the nine points on the position grid to anchor the caption to a corner, an edge or the centre.
- 5
Render and download
Press the button to draw the text onto the photo, then download the finished PNG.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.fillTextThe browser method this tool uses to draw the caption onto the photo, including how alignment and baseline are interpreted.developer.mozilla.org
- WHATWG: HTML canvas text styles specificationThe specification section defining canvas font, alignment and baseline properties that control where text lands.html.spec.whatwg.org
- W3C: CSS Fonts Module Level 4Defines the font family matching rules a browser follows when a requested typeface is not installed.w3.org
Frequently asked questions
Common questions about the add text to image tool.
This tool does not shrink or auto wrap a single line for you, since fillText draws at exactly the size percentage you set. A line that runs past the edges will be clipped by the canvas boundary, so for a long sentence, either drop the size percentage first or add your own line breaks to split it into shorter lines that fit comfortably.
No. The whole job is one canvas: drawImage paints your photo, fillText paints the caption on top of it at the pixel position the position grid calculated, and toBlob reads the combined result back out. That sequence never touches fetch or XMLHttpRequest, so turning off your connection before adding a caption changes nothing about how the tool behaves.
Not directly. A canvas can only render fonts that are already installed in the visiting browser, so the list is limited to typefaces available on effectively every desktop and mobile operating system. This keeps the result consistent for you and for anyone else who later opens the exported PNG.
PNG is lossless and supports transparency, so a logo or graphic with a transparent background keeps that transparency after the caption is added. Re encoding as JPEG would flatten any transparent pixels onto black, which is rarely what someone captioning an image actually wants.
Yes. Line breaks in the text field become separate lines on the image, stacked with even spacing and anchored together as one block at whichever position you choose on the grid.
No. Once the PNG is exported the caption is part of the pixel data, the same way text becomes part of a flattened image in any raster editor. If you need to change the wording later, add the text again on a fresh copy of the original photo rather than the exported file.