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. Another tool, has a different behavior to mouse click/movement while initial placement and later editing of the nodes. Architect it in such a way that its not a long list of if statements for state management.
The recently shared Eloquent Javascript[0] had chapter 19 making a pixel editor. That seems to be a good approach, but then I wouldn't know any better. Any recommended reading or small size sourcecode that one could read and learn?
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!
To be honest, depending on how many tools/features you want to add, that would be a very big project for a solo developer.
You'd need to build all of that functionality yourself. You detect where the user is pointing/clicking, then draw the element they are creating as visual feedback, then once done, persist the element somewhere.
If a user clicks on the element again, somehow display that it is selected and display the tools for editing.
You could build it in vanilla JS, or use a framework like React.
For any non-trivial editor you will need an object model that abstracts away the low level drawing functions and manages state.
I think fabric.js is worth checking as its source code is well organized and documented. It's not a small project though and the latest version was rewritten in TypeScript: https://github.com/fabricjs/fabric.js/tree/master
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. Another tool, has a different behavior to mouse click/movement while initial placement and later editing of the nodes. Architect it in such a way that its not a long list of if statements for state management.
The recently shared Eloquent Javascript[0] had chapter 19 making a pixel editor. That seems to be a good approach, but then I wouldn't know any better. Any recommended reading or small size sourcecode that one could read and learn?
[0] https://eloquentjavascript.net/19_paint.html