Client or server side HTML5 canvas rendering for the w630> .js whiteboard application?

Question

I thought a small whiteboard web application would be a good way to improve my node.js and JavaScript skills. I have seen several on the Internet, which makes sense, since it seems ideal for this type of stack.

Just thinking, I was interested to learn about the role of the client and server in this type of web application. Having stumbled upon node-canvas , I became even more confused. What, in particular, should the client and server respond to?

If the server is capable of displaying on canvas, should it accept and verify input from clients and then pass it on to all other connected users through socket.io ? Thus, the server stores the master-canvas element. As soon as a new user connects, the server just needs to pop out its canvas so that the client, bringing it to speed with what was drawn.

Any implementation guide is welcome - specific or philosophical.

Thanks!

Answer 1

I wrote http://draw.2x.io , which uses node-canvas (previously node-cairo, which I wrote myself) along with socket.io.

As I developed my application, the client essentially does all the strokes from user input. They, in turn, are processed by canvas abstraction, which supports a subset of the operations and parameters that I myself have defined. If this level accepts any input that paint modules produce, it is also sent via socket.io to the server.

On the server, I have the same kind of node-canvas canvas shell. This, therefore, replicates the user input from the user in memory, which ultimately allows the status image to be sent to new clients. After that, the strokes will be - waiting for the settings / context to be checked by the server application - will be published to other connected clients, which will repeat the same procedure as above.

Answer 2

The company I work with has implemented a whiteboard application with node.js (but did not use node -canvas) and socket.io. Unfortunately, I can’t give you the code or even the website since it has not been released.

Your implementation seems very similar. Clients connect to our server and update the server whenever a board is drawn (JSON data w / (x, y)) through socket.io. Then the server updates the remaining clients and saves a copy of all coordinates (x, y) so that the new clients that have joined can see what has already been drawn.

Good luck with your application. I have been programming with node.js a lot lately and I like the boy.

Answer 3

here is a multi-user whiteboard textbook written in javascript / html5, all source code is available: http://www.unionplatform.com/?page_id=2762

it is not node on the server side, but client-side code should be useful if you want to adapt it to the node server.