How to draw on a webpage with a pen, arrows and shapes
Updated
Steps
- Click the Highlite icon to open the toolbar.
- Pick a tool: Drawing (P) for freehand strokes, Arrow (A), Rectangle (R) or Ellipse (O).
- Choose a color and a stroke width (S, M, L or XL) in the panel.
- Press on the page and drag. An arrow runs from where you press to where you release, with the head at the end. Hold Shift to draw a square or a circle. Press Esc to cancel a shape before you release.
- To adjust a drawing, switch to Select (V). You can move any drawing, resize a rectangle or an ellipse, and change the color or width of what is selected.
- Remove a drawing with the Eraser (E), the Delete key after selecting it, or Undo.
Drawings are meant for the screenshot
Drawings sit on a transparent layer over the page, which keeps working underneath. A circle around a broken element and an arrow to the error message say more than a paragraph, and they stay in place when you capture the page.
Limitations
- Drawings are placed at a position on the page. If the page lays out differently later (another window width, a redesign, content that loads differently), a drawing can end up next to the wrong element.
- Shapes are rectangles and ellipses with an outline and no fill. There are no plain lines without an arrowhead, polygons or callouts.
- Shapes cannot be rotated. Freehand strokes and arrows can be moved but not resized.
- Drawing is not available on browser pages or extension store pages.
Frequently asked questions
Can I draw a straight line without an arrowhead?
No. The Arrow tool always adds a head at the end. The Drawing tool draws freehand strokes, which are not perfectly straight.
Do drawings stay on the page after a reload?
Yes. Drawings are saved in your browser with the page URL and come back when Highlite is on for that page.
Are my drawings included in screenshots?
Yes. Screenshots taken from the Export panel include every drawing, arrow and shape, along with highlights and notes.