HTML Canvas: несколько графиков getContext одновременно

Question

Я создаю инструмент с использованием веб-сокетов, который позволяет нескольким пользователям «рисовать» на полотнах друг друга.Пользователь рисует на холсте, и объект, содержащий события mousedown / mouseup и координаты, мгновенно передается другим пользователям.Затем это наносится на их полотна, что дает эффект того, что несколько пользователей рисуют в одном месте.

Это работает так, как описано: вы можете наблюдать, как кто-то что-то рисует, а затем рисовать то, что появится на их холсте.Проблема возникает, когда вы рисуете одновременно с кем-то другим.

Для каждого пользователя он создает новый контекст для холста каждого пользователя, используя:

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

Когда вы рисуете в то же времяВ то время как другой пользователь, холсты безумно рисуют линии между вами и их координатами, несмотря на то, что используют разные контексты.

Почему это так?Нужно ли делать что-то еще, чтобы разместить сразу несколько линий?Разве невозможно создать несколько контекстов таким образом?

Любая помощь будет наиболее ценной.

Answer 1

В спецификации HTML5 Canvas указано , для getContext():

Если метод getContext () уже был вызван для этого элемента для того же contextId, вернуть тот же объект, который был возвращен, что время и прервать эти шаги. Дополнительные аргументы игнорируются.

У вас нет другого контекста для пользователя, он один и тот же. Последняя позиция пути изменяется каждым новым событием, и я предполагаю, что вы не используете beginPath и 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;

Answer 2

Я подозреваю, что это тот же контекст, на который рисуют ваши пользователи.Я предлагаю собирать входящие запросы на рисование и объединять их в один метод рисования, который при необходимости создает содержимое холста.