Sketching and Annotating on Images

Most of the drawing people do at work is not art. It is a red circle around the button that is broken, an arrow pointing at the row with the wrong total, a scribble showing where a wall should move. Those marks need to happen in seconds, and opening a full design application to make them is absurd. That is the job our Drawing tool is built for.

Annotation is not whiteboarding

The two get lumped together and they solve different problems. Annotation starts from an existing image and adds a thin layer of meaning on top: the picture is the content, your marks are the commentary. Whiteboarding starts from nothing and builds structure - boxes, connectors, sticky notes, a diagram that did not exist before.

If you need an infinite canvas, shapes you can move after placing them, and a document to export at the end, use a whiteboard instead. Our notes on the online whiteboard cover that tool and when it is the better fit. If you have a screenshot and thirty seconds, stay here.

What the tool gives you

Deliberately little. Load an image, and the canvas takes on that image's exact pixel dimensions. You get a colour picker, a brush size from one pixel up to fifty, and freehand strokes that follow your mouse or trackpad. Clear canvas wipes your marks and restores the untouched photo underneath, so a bad stroke costs you the annotation but never the original. Download saves a PNG with the drawing baked in.

There is no layer stack and no save state, which is the trade: nothing to learn, nothing to configure, and no account to create. The image you loaded is never uploaded either - it is decoded into a canvas element in your own browser, and the export is generated on your machine.

Making marks people can actually read

Pick a colour nothing else in the image uses

Red is the default because most interfaces and most photos have very little of it. But red annotation on a screenshot of an error state, where half the page is already red, disappears completely. Magenta and bright green survive almost any background. Glance at the image first and pick the colour it lacks.

Scale the brush to the image, not to the screen

The brush size is measured in image pixels. A three pixel stroke that looks perfectly bold on a 900 pixel wide screenshot becomes a hairline on a 4000 pixel photo, and then vanishes when someone views it as a thumbnail in a chat client. As a rule of thumb, aim for a stroke roughly one five-hundredth of the image width and adjust from there.

Fewer marks, bigger marks

Three circles and an arrow communicate. Fifteen scribbles are a puzzle. If a screenshot needs more than about four annotations, it is really two screenshots, or it needs written notes alongside it.

Circle the thing, do not cover it

Draw around what you are pointing at rather than over it. The reader has to see the element to understand the comment.

Jobs this handles well

• Bug reports. A screenshot with the broken control circled saves a paragraph of description and removes all ambiguity about which element you mean.
• Design feedback. Marking spacing problems directly on the mockup is faster than describing them in a comment thread.
• Instructions. Arrows and numbers over a screenshot make a usable how-to for a colleague or a family member in a couple of minutes.
• Photos of physical things. Marking up a room photo for a contractor, or a diagram of where a part goes, works exactly the same way.
• Teaching. Annotating a chart, a map, or a worked example before dropping it into slides.

Two practical tips

Resize very large images first. The canvas keeps the image at native resolution and scales the display to fit your window, so on an enormous photo the drawing surface and the visible preview are working at different scales. Bringing a huge file down to a sensible screen size before annotating keeps strokes landing exactly where you expect. Our resizing guide covers how to choose that size.

Annotation is not redaction. Scribbling over a password or an email address with a brush leaves the underlying pixels visible at the stroke edges, and a partially covered value is often still guessable. For anything genuinely sensitive, use a proper redaction pass first - see what automatic redaction catches and misses - and annotate afterwards.

Why the browser is the right place for this

Screenshots are among the most sensitive images people handle. They contain customer records, internal dashboards, half-finished features, and email threads. Sending one to a web service to draw a circle on it means handing over all of that context to a third party. Doing it in a canvas on your own machine means the file never leaves the device it was captured on.