Płótno HTML: wiele kresek getContext w tym samym czasie

Question

Buduję narzędzie za pomocą websockets, które pozwala wielu użytkownikom "rysować" na płótnach nawzajem. Użytkownik rysuje na płótnie, a obiekt zawierający zdarzenia i współrzędne przekazane innym użytkownikom jest natychmiast przekazywany do innych użytkowników. To jest następnie nanoszone na ich płótna, co daje efekt polegający na tym, że wielu użytkowników rysuje w tym samym miejscu.

Działa tak, jak opisano: można obejrzeć, jak ktoś coś narysuje, a następnie narysować coś, co pojawi się na ich płótnie. Problem pojawia się, gdy rysujesz w tym samym momencie co ktoś inny.

Dla każdego użytkownika, tworzy nowy kontekst dla płótnie każdego użytkownika za pomocą:

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

Podczas rysowania w tym samym momencie, co inny użytkownik, płótna szaleńczo rysować linie między swoimi a ich współrzędne, mimo to używając różnych kontekstów.

Dlaczego tak się dzieje? Czy muszę zrobić coś innego, aby uwzględnić jednocześnie wiele wykreślanych linii? Czy w ten sposób nie można tworzyć wielu kontekstów?

Każda pomoc będzie najbardziej ceniona.

Answer 1

The HTML5 Canvas spec says na getContext():

Jeżeli sposób getContext() został już wywołany tego elementu w tym samym contextId, powrót do tego samego obiektu jako powrócił że czasie i przerywać czynności. Dodatkowe argumenty są ignorowane.

Nie masz innego kontekstu na użytkownika, to ten sam. Ostatnia pozycja ścieżki jest następna po każdym nowym zdarzeniu i domyślam się, że nie używasz beginPath i moveTo do resetowania ścieżki na każdym nowym wydarzeniu. Zamiast tego wypróbuj coś takiego:

// 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

Podejrzewam, że jest to ten sam kontekst, z którego korzystają użytkownicy. Proponuję zebrać przychodzące żądania rysowania i połączyć je w jedną metodę malowania, która w razie potrzeby tworzy zawartość płótna.