Quickly checking through the JS being served to the site, it looks like the project is using Paper.js[1] for its foundational canvas library. As PaperJS is a 2D canvas library, I doubt the project is using any WebGL magic for its functionality. I could, of course, be very wrong!
> Speaking as a non-professional JS programmer, where can I read about how to architect a program like this where you select a tool, then that tool lets you draw (or do something) on canvas.
I've not got any sources for you, but I think the EJ chapter makes the key point that however you architect the project, you really, really need to keep as much of your user interface as possible in HTML/CSS, if only for accessibility. When it comes to manipulating graphical objects already added to the canvas, I'm not a great fan of the "box controls" approach (for controlling width, height, scaling, rotation) - which a lot of canvas libraries seem to include - because I can't think of an efficient/elegant way to make those controls accessible.[2]
The other big issue is keeping track of state, and possibly state history if you want undo/redo functionality. For this you really need to think of building on top of an existing canvas library - many will make state management a lot easier to handle, leaving you more time to build out the interesting stuff. There's a lot of excellent libraries out in the wild for you to choose from[3].
Or you could build your own canvas library. I've had lots of (at times frustrating) fun over the past 10 years doing just that. Highly recommended!
> Speaking as a non-professional JS programmer, where can I read about how to architect a program like this where you select a tool, then that tool lets you draw (or do something) on canvas.
I've not got any sources for you, but I think the EJ chapter makes the key point that however you architect the project, you really, really need to keep as much of your user interface as possible in HTML/CSS, if only for accessibility. When it comes to manipulating graphical objects already added to the canvas, I'm not a great fan of the "box controls" approach (for controlling width, height, scaling, rotation) - which a lot of canvas libraries seem to include - because I can't think of an efficient/elegant way to make those controls accessible.[2]
The other big issue is keeping track of state, and possibly state history if you want undo/redo functionality. For this you really need to think of building on top of an existing canvas library - many will make state management a lot easier to handle, leaving you more time to build out the interesting stuff. There's a lot of excellent libraries out in the wild for you to choose from[3].
Or you could build your own canvas library. I've had lots of (at times frustrating) fun over the past 10 years doing just that. Highly recommended!
[1] - http://paperjs.org/
[2] - My proof-of-concept attempt for an alternative approach to controls. Sadly not very pretty: https://scrawl-v8.rikweb.org.uk/demo/modules-005.html
[3] - https://benchmarks.slaylines.io/