Draw on Web
Jump to: Install · How to use · Shortcuts · Troubleshooting · FAQ · Contact
How to install
From the Chrome Web Store (recommended):
- Open the Draw on Web store listing.
- Click Add to Chrome, then Add extension in the confirmation dialog.
- Click the puzzle-piece icon in Chrome's toolbar and pin Draw on Web for one-click access.
From source (load unpacked):
- Open
chrome://extensions. - Turn on Developer mode (top-right).
- Click Load unpacked and select the folder containing
manifest.json. - Pin it from the puzzle-piece menu. There's no build step — it loads as-is.
To draw on local file:// pages, open chrome://extensions → Draw on Web → Details → enable Allow access to file URLs.
How to use
- Turn it on. Click the Draw on Web toolbar icon, or press Ctrl+Shift+D (⌘+Shift+D on Mac). A slim floating toolbar appears.
- Pick a tool. Choose the pen, highlighter, line, arrow, rectangle, ellipse, text, number stamp, or eraser from the bar — or press its hotkey.
- Set colour & size. Click the colour dot to open the popover for colour, thickness, and opacity. A thickness slider also sits right on the bar (you can hide it in Settings). Each tool remembers its own thickness and opacity.
- Draw. Click and drag on the page. Hold Shift while drawing a rectangle, ellipse, or line to snap to a square, circle, or 45°.
- Add text. Pick the Text tool, click where you want it, and type. Shift+Enter makes a new line; Enter commits. Double-click text with the Select tool to re-edit it.
- Edit anything. Use Select to marquee or click strokes, drag to move them, and use the handles to resize. Delete or Backspace removes the selection.
- Use the site normally. Switch to Cursor mode (the cursor button, or press C) so clicks pass through to the page while your annotations stay visible and anchored.
- Move the toolbar. Drag it by the left grip, or collapse it to a small puck with the chevron. It remembers where you left it.
- Export. Click Export PNG to save the visible area, or switch to full-page export in Settings to capture every stroke across the whole document.
New here? The first time you switch it on, a quick device picker and a short welcome tour walk you through everything. You can reopen the tour anytime from the ? button on the toolbar.
Settings
Open Settings from the gear on the toolbar, or right-click the extension icon → Options. You can:
- Tools — show or hide individual tools and drag to reorder them on the bar.
- Toolbar style — size (Compact / Regular / Large), corner shape (Sharp / Rounded / Pill), a custom colour with automatic text contrast, and the on-bar thickness-slider toggle.
- Defaults — starting tool, colour, thickness, opacity, toolbar position, and text font (Monospace, Sans-serif, Serif, Rounded, or Handwritten).
- Appearance — theme (Auto / Light / Dark) and accent colour.
- Behaviour — input device (Auto / Mouse / Trackpad / Touchscreen), pen smoothing (Off / Low / Medium / High), export mode, and auto-restore drawings per URL (off by default).
- Also — a keyboard-shortcuts reference, Clear saved drawings, and Reset to defaults.
Settings sync via your Chrome account, so they follow you across your Chrome installs.
Keyboard shortcuts
Available while Draw on Web is active on a page. Labels adapt to your platform (⌘ / ⌥ / ⇧ on macOS; Ctrl / Alt / Shift elsewhere).
| Action | Shortcut |
|---|---|
| Toggle draw mode | Ctrl/⌘ + Shift + D |
| Select | S |
| Pen | P |
| Highlighter | H |
| Line | L |
| Rectangle | R |
| Ellipse | O |
| Arrow | A |
| Text | T |
| Number stamp | N |
| Eraser | E |
| Filled rectangle (enable in Settings) | F |
| Filled ellipse (enable in Settings) | G |
| Cursor mode — use the site | C |
| Undo | Ctrl/⌘ + Z |
| Redo | Ctrl/⌘ + Shift + Z or Ctrl + Y |
| Delete selection | Delete / Backspace |
| Square / circle / 45° | hold Shift while drawing |
| Change brush size | hold Alt/⌥ and scroll the wheel |
| Cancel · deselect · exit | Esc |
The toggle shortcut can be rebound at chrome://extensions/shortcuts.
Troubleshooting
The toolbar doesn't appear on a page
- Draw on Web can't run on Chrome's own system pages (
chrome://, the Chrome Web Store, and the new-tab page) — that's a browser restriction, not a bug. Try it on a normal website. - If you just installed or reloaded the extension, the first toggle injects the scripts into already-open tabs. Toggle once more, or reload the page.
- It only runs in the top frame of a page, not inside embedded iframes.
It won't work on a local file
Enable Allow access to file URLs at chrome://extensions → Draw on Web → Details, then reload the file.
My drawings disappeared after reloading
Auto-restore is off by default, so annotations aren't re-loaded automatically when you revisit a page. Turn on Settings → Behaviour → Auto-restore drawings if you want them to persist per URL on your device. Export to PNG anytime to keep a permanent copy.
The toolbar is in my way
Drag it by the left grip to reposition it, or collapse it to a small puck with the chevron. Set a default position (and corner, size, colour) in Settings.
Typing text triggered the website's shortcuts
It shouldn't — Draw on Web shields key events while you're typing in its text tool. If you see this, make sure you clicked with the Text tool and are typing into the inline editor (not just on the page).
Keyboard shortcut doesn't toggle draw mode
Another extension may have claimed Ctrl/⌘+Shift+D. Reassign it at chrome://extensions/shortcuts.
Frequently asked questions
Yes — completely free, with no account, no sign-up, and no paid tiers.
Yes. Strokes are stored in the page's own coordinate space rather than pinned to the screen, so they scroll with the content — through normal scrolling, infinite scroll, and single-page-app navigation, and even inside inner scroll areas like chat threads and doc panels.
Auto-restore is off by default. You can enable it in Settings → Behaviour to have drawings saved per URL on your device and re-loaded when you revisit. Either way, you can export a PNG to keep a copy.
Settings sync through your own Chrome account so they follow you across installs. Drawings are stored locally on your device and never leave it. Nothing is sent to any server. See the Privacy Policy.
Chrome blocks all extensions from running on its system pages (chrome://, the Web Store, the new-tab page). Draw on Web also runs only in the top frame, not inside iframes. On local file:// pages, enable "Allow access to file URLs" in the extension's details.
Yes. It detects mouse, trackpad, and touch and adapts gestures and touch-target sizes to match — one finger draws, two fingers scroll, pinch-to-zoom passes through, and a resting hand is rejected while a stylus draws. You can also set the input device manually in Settings.
Click Export PNG on the toolbar. The default captures the visible area; switch to Full page in Settings → Behaviour to render every stroke across the whole document into one image.
Yes. In Settings → Tools you can show or hide any tool and drag to reorder them. The filled rectangle and filled ellipse are off by default and can be enabled there.
The toggle shortcut (Ctrl/⌘+Shift+D) can be rebound at chrome://extensions/shortcuts. The single-key tool hotkeys are fixed.
Open the Options page and use Clear saved drawings, or Reset to defaults to also restore all settings. Uninstalling the extension removes all locally stored data.
Contact & report a bug
Found a bug, have a feature idea, or need a hand? Here's how to reach us.
Filing a bug? Please include your Chrome version, the page or kind of site where it happened, what you expected, and what actually occurred. Screenshots help a lot.