/draw-bookmarklet

Bookmarklet scratchpad that lets you draw over webpages, with touch and pen pressure support.

Primary LanguageJavaScriptMIT LicenseMIT

Draw bookmarklet 🖍️

This bookmarklet supports both touch and pen pressure, allowing you to annotate or draw over webpages.

GitHub

Free. No extensions. No sign-up. 100% private.

⭐ consider starring if you find this useful!

Features

  • line path smoothing
  • toggle between "pen" and "brush" with variable pressure
  • pen and finger touch pressure sensitivity (I was surprised)
  • color picker
  • highlighter prototype with transparency
  • stroke size slider control
  • undo
  • eraser
  • disable button to interact with the elements of the page below
  • palm rejection

Tested on

  • iOs Ipad Safari + Apple pen
  • Android Chrome and Firefox

Installation

Copy the draw.js or draw.min.js content to your bookmark url and execute at the desired page.

Screenshot

04DF03E9-CC33-4DBE-A6A7-22F3F457C5D2

Known issues

Not working on Chrome iOs.

To-do

  • improve the tool layout
  • create the option to load the script as an external file, as some browsers have a limit on bookmarklet character size
  • preferences saving
  • repository
    • actions (issue with .load file creation)
  • improve highlighter (fix the dots between line segments)
  • make the code more concise

contributions are welcome