Drawing Bookmarklet

This bookmarklet provides an easy and intuitive way to draw over web pages, with tons of customization.

While in drawing mode, press H to view all features.

To exit drawing mode, press the escape key or click the bookmarklet again.

Usage

To add the bookmarklet to your bookmark bar, head over to https://simondmc.com/drawing-bookmarklet since Markdown does not support JavaScript links.

Safety

Bookmarklets are generally dangerous as they get full access to any page you run them on. This bookmarklet makes zero network requests and works perfectly fine while offline (unless the remote version is installed).

As the minified version is hard to read and it's therefore difficult to verify its trustworthiness, you are more than welcome to read through the unminified version and run it through a minifier of your choice (for example Terser).

This also means absolutely no telemetry data is collected. If you find it useful, consider starring the project!

Keybinds

H - Open the help menu

General:

• Left Click - Draw
• Right Click - Erase
• Middle Click - Add text
• Shift - Switch to freehand
• Shift + R - Switch to rectangle
• Shift + C - Switch to circle
• Shift + Click - Fill color
• E - Erase canvas
• T - Toggle whiteboard mode
• Shift + Scroll / Arrow Keys - Change brush size
• F - Focus page content
• F1 - Hide drawing
• Ctrl + Z - Undo
• Ctrl + Y - Redo
• Ctrl + S - Save as image
• Esc - Close modal / Exit drawing

Colors:

• W - White
• B - Black
• R - Red
• G - Green
• L - Blue
• Y - Yellow
• O - Orange
• P - Purple
• M - Magenta
• A - Aqua
• C - Custom color

A video overview of some of the features is also available here.