Hacker News Reader

Comment by rhubarbcustard | Hacker News Reader

Nicely done, website is nice and it's great that you can just click and get started straight away. In your comment you said you moved away from mySQL, what exactly do you store in the DB? Which leads to the question: how do you transfer the drawing data between clients? I guess it's not a case of uploading a Canvas as an image?

View on HN

The drawing is basically a list of strokes, and a stroke is a list of points - that is, (x, y) coordinates. So the database is mostly a huge table of (x,y) coordinates.

Uploading the entire canvas would far too inefficient - I simply upload the points.

The transfer between two clients uses a technique called 'long polling'. That is, the client sends an HTTP request to the server, and the server doesn't respond until it has received a message (ie. stroke) from another client.

Did you end up using any libraries for the communication, such as socket.io? (http://socket.io/)

No just the standard async Java servlet calls. To be honest I didn't find out about socket.io until half way through the project.

Did you consider doing spline fits to the x,y coordinates and then just saving the spline coefficients instead?

The fit process could likely be done client-side, and could offer some subtle smoothing if wanted?

Anyhow, really nice execution!

paper.js has a nice method to do this. I actually used it in a whiteboard app I made as a proof of concept. Rather than saving every X,Y coordinate, it uses a configurable number of points and handles and makes bezier curves. http://paperjs.org/examples/path-simplification/

Reply on news.ycombinator.com