html5 canvas: draw together

Question

Now I'm developing a paint chat program using HTML5 canvas, and I meet a problem that two or more user draw on a same canvas at the same time.

Canvas have only one instance for each property, only one strokeStyle, one fillStyle, and so on. When two users draw on the same canvas; chaos ensues.

I've tried using more canvases that have the same positioning, but when and how to exchange two canvases' data is a problem.

Does anyone know any other ways to do so, or how can I exchange data between canvases properly?

EDIT:

I think I didn't say it clearly enough. Now I have canvas, messages from server via socket.io, different painting requests on hand. When user moves his mouse to draw a line, the canvas now gets lineWidth, strokeStyle, globalOpacity. However, since canvas can only have one painter at one time, the draw requests from server, including another kind of painter, cannot be drawn at the same time. If we have enough user, the painting won't fluent.

I prepare to write a queue or something like it, to implement the function, but there might be other way to do it.

Answer 1

Each client needs to send the drawing commands to a server. The server should broadcast the commands to all clients. You need a method that receives the messages and draw them.

E.g. if the user can set attributes like e.g. "stroke size" and color, you also need to broadcast those changes.

You need to register mouse listeners for the users painting. They should call methods for painting e.g. drawMoveTo and drawLineTo, and also buffer the commands in a single path, so you can broadcast the full path in the messages to the other clients.

Examples of messages could be:

{"clientId": 36, "penSize": 8, "color": "blue"}
{"clientId": 36, "command": {"moveTo", "x": 48, "y": 12}, 
                   "path": [{"moveTo", "x": 48, "y": 12}]}
{"clientId": 36, "command": {"lineTo", "x": 52, "y": 24}, 
                   "path": [{"lineTo", "x": 52, "y": 24}, 
                            {"moveTo", "x": 48, "y": 12}]}
{"clientId": 36, "command": {"lineTo", "x": 47, "y": 36}, 
                   "path": [{"lineTo", "x": 47, "y": 36},
                            {"lineTo", "x": 52, "y": 24},
                            {"moveTo", "x": 48, "y": 12}]}

You can have a datastructure to keep track of the "strokeAttributes" for each user. Then when you receive a message that is of type moveTo or lineTo, you lookup the clientId to get the stroke attributes e.g. penSize and color, then you call the same methods that is called when the local user paints, e.g. drawMoveTo and drawLineTo.

The draw methods has to use different strokes and attributes depending on from what client the message (or mouselistener) is coming from. It will change a lot, if multiple users draw concurrently.

I would recommedn that you do the communication using WebSockets or maybe socket.io.

Here is a nice article with code for an application similar to what you ask for Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas