whiteboard

ABOUT a

• demo.mp4
• Infinite space
• No UI
• Vanilla JS

I created this online whiteboard during the pandemic. As a math tutor, I needed a better drawing tool for screensharing and remote tutoring from my computer.

Other virtual whiteboards have too many buttons and features, wasting screen space and distracting students. They make it difficult to have a basic drawing experience. Some don't even have an infinite canvas. This whiteboard addresses all of that.

CONTROLS a

Watching the demo.mp4 is the best way to understand the controls.

The whiteboard was designed to be used with a simple drawing stylus and tablet like mine, used in mouse mode and with the toggle buttons mapped to RMB and Shift. Using a mouse or touchpad is possible but clunky, as they always feel when it comes to desktop drawing.

EDIT

• LMB + mouse move
  - Draw
• Shift + mouse move
  - Erase
• Space
  - Erase all
• Ctrl + Z
  - Undo
• Ctrl + Y
  - Redo

VIEW

• RMB + mouse move
  - Pan
• RMB in upper right margin + mouse move up/down
  - Zoom in/out
• R, G, B
  - Change pen color
• F
  - Change to default pen color (white/black)
• D
  - Toggle dark mode

FILE

• Ctrl + P
  - Save as png
• Ctrl + S
  - Export as json
• Ctrl + O, or drag + drop
  - Import from json

PRIOR ART a

• Draw50 by CS50

  The original inspiration. It also has simple controls with no UI, but it was designed for touchscreens more than desktop. It lacks documentation (tip: you have to swipe up from the bottom to access the hidden menu! And I'm still not sure if it's an infinite canvas.)

• Ziteboard

  This is the only other online whiteboard that I'm happy to use. It seems to work well on all platforms. I used this on an iPad for a year of math tutoring. The important functions are located in a few small, quick to access menus that try to stay out of the way.

ROADMAP a

• Bugfix: perform actions on deleted paths so redoing will place them in context, instead of keeping state from time of deletion
• Bugfix: allow shift+LMB to keep erasing instead of interrupting the erase (the stylus often creates a LMB click during the erase motion)
• Support Safari
• Make the zoom region friendlier - maybe adding a tiny indicator, eg cursor size ++ when entering region, and also making the region bigger
• Improve performance from noticeable threshold ~10k points (1k paths) to ~100k (10k paths)
• Customizable controls, eg. substitute LMB for Ctrl or some other key to avoid lots of mouse pressing
• Path smoothing, especially since lines become noticeably jagged when performance decreases
• Caching for session restore (eg. on accidental tab close or navigating back from history)
• Consider using slightly softer color contrast, like off-white instead of #fff
• Mobile app with same non-interface as well as thoughtful gesture controls