HTML Canvas: multiplo getContext tracciato allo stesso tempo

Question

Sto costruendo uno strumento tramite websocket che consente a più utenti di "disegnare" sulle tele degli altri. L'utente disegna su una tela e un oggetto che contiene eventi/coordinate mouse/mouseup viene trasferito istantaneamente ad altri utenti. Questo viene quindi tracciato sulle loro tele, che dà l'effetto di far disegnare più utenti nello stesso punto.

Funziona come descritto: puoi vedere qualcuno disegnare qualcosa, quindi disegnare qualcosa che apparirà all'interno della tela. Il problema si verifica quando si disegna nello stesso momento di qualcun altro.

Per ogni utente, si crea un nuovo contesto per la tela di ciascun utente utilizzando:

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

Quando si disegna nello stesso momento come un altro utente, le tele follemente disegnare linee tra le vostre e le loro coordinate, nonostante usando i diversi contesti.

Perché è questo il caso? Devo fare qualcos'altro per sistemare più linee contemporaneamente? Non è possibile creare più contesti in questo modo?

Qualsiasi aiuto sarebbe più apprezzato.

Answer 1

The HTML5 Canvas spec says, per getContext():

Se il metodo getContext() è già stato applicato su questo elemento per lo stesso ContextID, restituiscono lo stesso oggetto come è stato restituito che tempo, e cesserà seguente procedura. Gli argomenti aggiuntivi sono ignorati.

Non si dispone di un contesto diverso per utente, è lo stesso. L'ultima posizione del percorso viene alterata da ogni nuovo evento e suppongo che tu non stia utilizzando beginPath e moveTo per reimpostare il percorso su ogni nuovo evento. Prova invece qualcosa del genere:

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

Ho il sospetto che sia lo stesso contesto in cui i vostri utenti stanno attingendo. Suggerisco di raccogliere le richieste di disegno in arrivo e combinarle in un unico metodo di pittura che costruisce il contenuto della tela quando appropriato.