Bret Victor wrote an amazing essay on interaction design in 2011 [1].<p>After reading it, I thought "we should doodlify the web a lot more." A keyboard and mouse, while useful, are restricting in odd ways. Bret Victor explains in his essay how this is restricting, and what the way forward could be.<p>My contribution to it is simple and humble and definitely just a small step compared to Bret Victor his vision. I present Doodledocs: collaborative drawing, cross-device, stylus pressure-sensitive first, mouse + keyboard a distant second.<p>Doesn't this exist? Well, I've seen collaborative drawing that did not have web annotation or pressure sensitivity (e.g. Google Jamboard). And in the best cases where I did see most of these things (e.g. Inko [4, video]), they were native apps which locks you into an ecosystem. I want things to be open and free. And I want pressure sensitivity, collaborative drawing and web annotation into one place as the web could then feel like paper that we can draw on, together.<p>You don't have to. But you can! :-D<p>So, in my opinion, something such as Doodledocs doesn't exist.<p>Here is a video of me using it on an iPad [2]. I also tested it on a Wacom connected to a laptop. It's a bit buggy still (cross-browser compatibility/cross-device issues, I'm testing as much as I can nowadays). So I hope seeing me how I use it will show you how to deal with the slightly buggy situations :)<p>Oh, and it's all pure frontend <3 (with some P2P magic which is still only frontend :D). Who needs a backend anyways? ;-)<p>The code is on Github [3].<p>And it's free.<p>[1] <a href="https://news.ycombinator.com/item?id=21116948" rel="nofollow">https://news.ycombinator.com/item?id=21116948</a><p>[2] <a href="https://www.youtube.com/watch?v=QhrNl-fRrC8" rel="nofollow">https://www.youtube.com/watch?v=QhrNl-fRrC8</a><p>Summary of features + timestamps:<p>00:31 - pencil usage<p>00:40 - eraser usage<p>01:00 - color<p>01:30 - opacity (this allows you to get a more pencil-like or pen-like feel)<p>02:20 - Zooming in (menu zooming with you is an iPad feature only)<p>02:40 - Download your doodle<p>03:15 - Upload your doodle (and continue from where you left off)<p>04:00 - Share your doodle (i.e. collaborate together by sending the link to someone else)<p>05:00 - Scroll vs. draw mode (if you're in draw mode you can't scroll with your pencil but you can scrub with your fingers)<p>05:50 - Image annotation example (an image from Unsplash by Andreea Popa -- <a href="https://unsplash.com/@elfcodobelf" rel="nofollow">https://unsplash.com/@elfcodobelf</a>)<p>07:00 - Skip this part (here I am done with the website annotation example and fumbling around)<p>07:50 - Make website or image transparent (handy for tracing drawings, websites or pictures) -- also an example of me having fun with the app<p>11:00 - Website annotation example (using unsplash.com)<p>12:45 - Hacker News annotation example (same thing as 11:00, I'm a fan of this site :) )<p>13:00 - Going back to a blank canvas (leave the URL bar empty)<p>[3] <a href="https://github.com/melvinroest/doodledocs" rel="nofollow">https://github.com/melvinroest/doodledocs</a><p>[4] <a href="https://www.youtube.com/watch?v=QdjPVYxUhJw" rel="nofollow">https://www.youtube.com/watch?v=QdjPVYxUhJw</a>