- 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.
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 my 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.
LMB + mouse move
Shift + mouse move
- Erase all
Ctrl + Z
Ctrl + Y
RMB + mouse move
RMB in upper right margin + mouse move up/down
- Zoom in/out
R, G, B
- Change pen color
- Change to default pen color (white/black)
- Toggle dark mode
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.)
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.
- 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