Lienzo HTML: trazado múltiple de getContext al mismo tiempo

Question

Estoy construyendo una herramienta usando websockets que permite que varios usuarios "dibujen" en los lienzos de los demás. El usuario dibuja en un lienzo y un objeto que contiene eventos y coordenadas mousedown/mouseup se envía instantáneamente a otros usuarios. Esto se traza en sus lienzos, lo que da el efecto de tener múltiples usuarios dibujando en el mismo lugar.

Funciona como se describe: puedes ver a alguien dibujar algo, luego dibujar algo que aparecerá dentro de su lienzo. El problema ocurre cuando dibujas en el mismo momento que otra persona.

Para cada usuario, se crea un nuevo contexto para la lona de cada usuario usando:

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

Cuando se dibuja en el mismo momento como otro usuario, los lienzos con locura trazar líneas entre sus y sus coordenadas, a pesar de que usando los diferentes contextos.

¿Por qué es este el caso? ¿Tengo que hacer algo más para acomodar múltiples líneas que se trazan a la vez? ¿No es posible crear múltiples contextos de esta manera?

Cualquier ayuda sería muy apreciada.

Answer 1

The HTML5 Canvas spec says, por getContext():

Si el método getContext() ya ha sido invocada en este elemento para el mismo ContextID, vuelva el mismo objeto que fue devuelto que tiempo, y abortar estos pasos. Los argumentos adicionales son ignorados.

No tiene un contexto diferente por usuario, es el mismo. La última posición de ruta está siendo alterada por cada evento nuevo, y supongo que no está usando beginPath y moveTo para restablecer la ruta en cada nuevo evento. Pruebe algo como esto en su lugar:

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

Sospecho que es el mismo contexto en el que sus usuarios están dibujando. Sugiero recopilar las solicitudes de dibujo entrantes y combinarlas en un método de pintura que crea el contenido del lienzo cuando corresponde.