HTML Canvas：同时绘制多个 getContext

我正在使用 websockets 构建一个工具，该工具允许多个用户在彼此的画布上“绘图”。用户在画布上绘图，包含 mousedown/mouseup 事件和坐标的对象会立即推送给其他用户。然后将其绘制在他们的画布上，这给出了多个用户在同一个地方绘图的效果。

它的工作原理如下：您可以观看某人画一些东西，然后画一些将出现在他们的画布中的东西。当你和其他人同时画画时，就会出现问题。

对于每个用户，它使用以下方法为每个用户的画布创建一个新的上下文：

oekaki['canvas'] = document.getElementById('canvas');
oekaki['ctx'][unique_user_id] = oekaki['canvas'].getContext("2d");

当您与其他用户同时绘图时，画布会在您和他们的坐标之间疯狂地绘制线条，尽管它使用不同的上下文。

为什么会这样呢？我是否需要做其他事情来容纳同时绘制的多条线？难道就不能用这种方式创建多个上下文吗？

非常感激任何的帮助。

HTML5 Canvas 规范说, for getContext():

如果已在此元素上调用 getContext() 方法 对于相同的 contextId，返回与返回的对象相同的对象 时间，并中止这些步骤。附加参数将被忽略。

每个用户没有不同的上下文，它们是相同的。最后一个路径位置正在被每个新事件改变，我猜你没有使用beginPath and moveTo重置每个新事件的路径。尝试这样的事情：

// on some event, want to draw to (x, y) now:
var ctx = oekaki.canvas.getContext('2d');
var user = oekaki.user[unique_user_id];
ctx.beginPath();
ctx.moveTo(user.lastX, user.lastY);
ctx.lineTo(x, y);
// ctx.strokeStyle = ..., ctx.stroke(), etc, etc...
user.lastX = x;
user.lastY = y;