Here's a toolbar concept I'm working on. You can't actually draw anything, though. It's more about selection. I wanted to condense functionality (assuming that people are more likely to want to change color than stroke width and that they're more likely to want to switch from freehand to a particular shape [rectangle, in our case] than switching shapes [a pervasive pattern found in a lot of drawing tools]). The problems with condensing functionality are training and creating persistent, consistent feedback, of course. My approach is to subtly train users by cycling through some states to reveal functionality. Since ours is a product found in conference rooms and lecture halls (lots of users at once with different experience levels), we have to be a little creative about how we get new users up to speed. Framer has made testing these concepts much faster and more realistic. Vanilla JS would take a lot longer, and no other prototyping tools I'm aware of allow you to do the math required to create 3D lazy-susan-like selectors. What I'd really like, though, is to change the svg shape's stroke color to the selected one as simply as I can change a normal layer's. I'm aware of some libraries, but I hesitate to use them often, since Framer is always releasing great new updates that might break the libraries. Anyway, uhhhh... Framer!
Update: I found a bug. Selecting a shape worked fine until I animated the picker on page load. I'll have to figure that out. Clicking the shape should change the border to blue, but it's not happening until I manually select a different shape. Weird.
Update: fixed it.