html5 - html5 canvas:一起画画

现在我正在开发一个使用HTML5画布的画图聊天程序，我遇到了一个问题，两个或多个用户同时在同一画布上绘制。
画布对于每个属性只有一个实例，只有一个strokeStyle、一个fillstyle等等。当两个用户在同一张画布上绘制时，就会出现混乱。
我尝试过使用更多的具有相同位置的画布，但是何时以及如何交换两幅画布的数据是一个问题。
有人知道其他的方法吗，或者我如何在画布之间正确地交换数据？
编辑：
我想我说得不够清楚。现在我有了画布，通过socket.io从服务器发送的消息，手头上有不同的绘画请求。当用户移动鼠标绘制线条时，画布现在得到线条宽度、strokeStyle和globaloCapacity。但是，由于画布一次只能有一个绘制者，因此服务器（包括另一种绘制者）的绘制请求不能同时绘制。如果我们有足够的用户，这幅画就不会流畅。
我准备编写一个队列或类似的东西来实现这个函数，但是可能还有其他的方法来实现它。

最佳答案

每个客户机都需要将绘图命令发送到服务器。服务器应该向所有客户机广播这些命令。您需要一个接收和绘制消息的方法。
例如，如果用户可以设置“笔划大小”和“颜色”等属性，则还需要广播这些更改。
您需要为用户绘制注册鼠标侦听器。它们应该调用用于绘制的方法，例如drawMoveTo和drawLineTo，并在单个路径中缓冲命令，这样您就可以将消息中的完整路径广播给其他客户机。
消息的示例可以是：

{"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}]}

您可以有一个数据结构来跟踪每个用户的“strokatettributes”。然后，当您收到类型为moveTo或lineTo的消息时，您查找clientId以获取笔划属性，例如penSize和color，然后调用本地用户绘制时调用的相同方法，例如drawMoveTo和drawLineTo。
根据消息（或mouseListener）来自哪个客户机，draw方法必须使用不同的笔画和属性。如果多个用户同时绘图，它将发生很大的变化。
我建议您使用websockets或socket.io进行通信。
这是一篇很好的文章，其中包含一个应用程序的代码，类似于您所要求的Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas