DrawOverlay

Draw, highlight, blur and screenshot on top of any webpage — for tutorials, demos and reviews.

DrawOverlay lets you draw, highlight, blur and annotate directly on top of any webpage, without leaving your browser tab. Press Ctrl+Shift+D (Cmd+Shift+D on Mac) or click the toolbar icon to bring up a floating drawing layer, and press it again to hide it. The page underneath is never changed. Perfect for: • 📹 Recording tutorials and video walkthroughs • 🎓 Teaching and live online presentations • 💼 Design feedback, code reviews and team demos • 📌 Pointing things out while screen-sharing in Zoom, Meet or Teams • 🔒 Hiding private details before you share a screenshot ──────────────────────────────────────────── WHAT'S NEW IN 0.2 ──────────────────────────────────────────── • Highlighter, laser pointer, spotlight and blur tools • Select tool: move, recolor or delete anything you've drawn • Eraser that removes whole shapes with one swipe • One-click screenshots of the page with your drawings • Drawings are saved per page and come back when you return • Keyboard shortcut for every tool • Text size control • Redesigned toolbar that you can minimize and keep drawing • Sharper arrows that scale with line thickness ──────────────────────────────────────────── FEATURES ──────────────────────────────────────────── ✏️ Pen Sketch freely with smooth, natural strokes on any part of the page. 🖍️ Highlighter A see-through marker that highlights text without hiding it. 🔴 Laser Pointer A glowing red trail that follows your mouse and fades away. Great for live presentations, since it leaves nothing behind. 🔦 Spotlight Drag a box around what matters and everything else dims, so your audience looks exactly where you want. 🌫️ Blur to Hide Blur API keys, emails, names or any personal data before you record or take a screenshot. ▭ Shapes Draw rectangles, ellipses, arrows and straight lines. Just click and drag. T Text Labels Click anywhere to place a text label, type, and press Enter. Choose a text size from 12 px to 96 px. 👆 Select and Move Click any drawing to move it, change its color, width or text size, or delete it. 🧽 Eraser Swipe across a drawing to remove it. 📸 Screenshot Save the visible page, with all your drawings, as a PNG with one click. It's copied to your clipboard too, so you can paste it straight into chat, docs or a ticket. 💾 Drawings Saved Per Page Your notes stay attached to the page and come back when you open the same page again. Drawings scroll with the content, so they stay on the right spot. 🎨 Colors and Line Width 7 preset colors plus a color picker for any color, and line width from 1 px to 12 px. Your last color, width, text size and tool are remembered. ↶↷ Undo / Redo Step back and forward through every change. Clear everything in one click, and undo that too if you change your mind. ⌨️ Keyboard Shortcuts V select · P pen · H highlighter · K laser · E eraser R rectangle · O ellipse · A arrow · L line · T text S spotlight · B blur [ and ] smaller / larger · Delete removes the selected item · Esc lets you click the page again Ctrl+Z undo · Ctrl+Shift+Z or Ctrl+Y redo 📌 Minimize and Keep Drawing Shrink the toolbar to a small pill and keep using your current tool. The pill shows which tool is on. Tap its hand button to click and scroll the page normally, and tap again to go back to drawing. Drag the pill anywhere on the screen and it remembers the spot. 🖱️ Page Stays Usable With no tool selected, every link, button and scrollbar on the page works as usual. 🔒 100% Private, Zero Data Collection Everything runs on your computer. Drawings and settings are saved only in your browser's local storage, and screenshots go to your Downloads folder and clipboard. Nothing is ever sent to a server. No analytics, no tracking, no account. ──────────────────────────────────────────── HOW TO USE ──────────────────────────────────────────── 1. Open any webpage and click the DrawOverlay icon, or press Ctrl+Shift+D (Cmd+Shift+D on Mac). 2. Your last tool is already selected, so start drawing right away, or pick another tool from the toolbar. 3. Draw, highlight, blur or add text. Click the camera button to save a screenshot. 4. Press Esc to click the page normally, or minimize the toolbar to keep drawing with less on screen. 5. Click the icon again, press the shortcut, or click ✕ to hide the overlay. Your drawings are kept for next time. Tip: you can change the shortcut at chrome://extensions/shortcuts. ──────────────────────────────────────────── TECHNICAL DETAILS ──────────────────────────────────────────── • Runs inside a Shadow DOM, so the page's styles and scripts can't affect it and it doesn't affect them • Works on http, https and local file:// pages • All code is bundled into the extension: no external scripts, no CDN calls • Built on Manifest V3, the latest Chrome extension standard • Lightweight: about 240 KB in total, icons included • Permissions: "storage" to save your drawings and settings on your device, "scripting" and "activeTab" to show the overlay on the page you open it on, and access to the pages you visit so the overlay and screenshots work everywhere ──────────────────────────────────────────── KNOWN LIMITATIONS ──────────────────────────────────────────── • Drawings follow the main page scroll. Content inside a separately scrolling panel (for example a chat pane) can move under them. • On http (non-secure) pages, screenshots are downloaded but can't be copied to the clipboard. • The overlay runs in the main page only, not inside embedded frames. • Chrome doesn't allow extensions on chrome:// pages or the Chrome Web Store.