To give you an idea of what we're aiming for, these are our design mockups for PC (mobile has a different design): [url removed, login to view] But none of that is needed just yet.
Before all of that fun stuff, we just need to make the canvas work. So ignore the design. Think of a blank white page. The page only has to do the following:
1. Users connect to the server's blank canvas (the easy part!)
2. Brushstrokes/cursors get animated. Brushstroke paths are split into segments while a user is drawing (maybe every 100ms, 200ms?). Each segment is a data packet. Instead of being instantly rendered they should be retraced locally - so the line moves from (x,y) to (x,y). Example: [url removed, login to view]
Compare two windows of [url removed, login to view] side-by-side. Notice the cursor isn't animated naturally. It instantly updates piece by piece. That's the problem we want to solve, and to work for a lot of users in the same space.
If we can just make drawing work with smooth animation for compatible browsers, that's the hard part done! After that it's all fun and games... tools, chat, other features.