multiuser paint app with html5 canvas socket.io node.js

Question

I am doing kind of multi-user application with html5 canvas, socket.io, node.js Over now I am using broadcast to send canvas state to others, but I can see that there is sometimes kind of race: Changing stroke properties(like color or lineWidth) in one user window, not always equals the same in other window(then the line is painted with properties from 2nd user). It seems to me as kind of race or sth. Can anyone help me how to synchronize it or maybe give me a clue how to implement it differently.

Answer 1

You need to cache the properties for all users, then when you are about to process an "event" from a user, you look-up the properties for that users (eg lineWidth and color), then you paint the "event".

See a full example with code on Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas .