About the Rectangle Tool
Draw rectangles right on top of a picture: a red outline around a button in a screenshot, a see-through yellow highlight over a line of text, a solid box to cover something up or a rounded frame around a face. Drag from one corner to the opposite corner. Choose the colour, outline thickness, fill, which can be none, see-through or solid, and how round the corners are. Draw as many as you like, undo the last one and save the result as a full-size PNG. Your picture is edited in your browser and is never uploaded.
Updated October 2026
How to use the Rectangle Tool
- 1Select an image or drop one on the page.
- 2Pick a colour, outline thickness and fill.
- 3Drag on the picture from one corner to the opposite corner.
- 4Draw more rectangles if you like, and press Undo to remove the last.
- 5Press Download PNG to save the picture with the rectangles.
What rectangles are for
A rectangle is the most common mark on a picture: it points at something, groups something, hides something or highlights something. People draw them on screenshots for bug reports and tutorials, on photos to tag parts of a product, and on documents to blank out a number before sharing.
Outline, highlight or cover
With no fill, the rectangle is a frame that leaves the picture visible. With a see-through fill it works like a highlighter. With a solid fill and no outline it becomes a patch that covers whatever is below. Combine a see-through fill with an outline of the same colour for a tidy callout.
- Frame: outline only, 3 to 6 px, bright colour
- Highlighter: see-through fill, outline 0, yellow
- Cover-up: solid fill, same colour as the background
- Callout: see-through fill plus outline
Sizes and colours
Thickness is measured in picture pixels, so it scales with the size of your picture. The default is about a hundred and fiftieth of the shorter side, which looks right on a typical screenshot. Red and yellow stand out on most pictures, white on dark ones.
A quick example
For a bug report, upload a screenshot, choose red, outline 4 and no fill, and drag around the button that misbehaves. Draw a second rectangle around the error message. Download the PNG and attach it to the report.
Phone and computer
On a phone, drag with one finger; the page does not scroll while you touch the picture. On a computer, hold Shift for squares. The picture is saved at its full size, up to about 16 million pixels.
Good to know
The rectangles are drawn into the saved PNG, so they cannot be removed afterwards; keep your original file. For arrows use Line Tool, for circles Ellipse Tool, and for text labels Add Text to Image.
Features
- Outline, see-through or solid fill
- Rounded corners
- Any colour and thickness
- Snap to perfect squares
- Undo and Clear all
- Private: runs in your browser
Frequently asked questions
How do I draw a square?
Switch Perfect squares on, or hold Shift while you drag on a computer. The shape snaps to equal width and height.
How do I make a highlight over text?
Choose See-through as the fill, set the outline thickness to 0 and drag over the text. The text stays readable under the colour.
Can I hide something with a rectangle?
Yes, choose Solid fill. For sensitive information, remember that a solid box is permanent in the saved PNG, but the original file is unchanged, so do not share the original.
Can I move a rectangle after drawing it?
Not yet. Press Undo to remove the last rectangle and draw it again.
How do I get rounded corners?
Move the Rounded corners slider. The corners are limited so that they never exceed half the shorter side.
Is my picture uploaded?
No. Everything stays in your browser.