Endless Canvas

While teaching, I often need to scribble some small things on a whiteboard. I love using Milton, but I needed something that runs in the browser (for a very specific use case). There is on the same page which works quite well and it's even possible for multiple people to draw on the same canvas, but it lacked some functionality I needed, so I prototyped a small web app myself.

It is written in vanilla JavaScript, with heavy use of the Canvas API (and the newer OffscreenCanvas API) as well as the PointerEvent API. The code is a bit messy, but can be found here.

Try it yourself: maxhaessle.in/endlesscanvas

How to draw:

• left mouse button: draw
• right mouse button or [space] + left mouse button: move canvas
• [shift] + left mouse button: eraser
• [c]: centers canvas at origin
• [+] / [-] or mousewheel scroll: change brush size
• mousewheel click: reset brush size
• [1] - [9]: select color
• [x]: switch to last used color (pressing it again switches back, so it's basically a toggle between two colors)
• [z] or [u]: undo* (max. 50 steps)
• [y] or [r]: redo*
• [s]: save complete image as transparent .png
• [f]: toggle fullscreen
• [e]: empty / reset complete canvas

This is optimized for my use case and I only tested it on my computer in the browser I use, your experience may vary.

* There is still a bug with the undo/redo functionality where sometimes some fragments remain on the canvas.