HTMLキャンバス：同時に複数のgetContextをプロットする

Question

私は、複数のユーザがそれぞれのキャンバスに「描画」できるウェブソケットを使ってツールを構築しています。ユーザーはキャンバス上に描画し、マウス/イベントや座標を含むオブジェクトは他のユーザーに即時にプッシュされます。これをキャンバスにプロットすると、複数のユーザーが同じ場所に描画するという効果が得られます。

このように動作します。誰かが何かを描いているのを見て、キャンバス内に表示されるものを描くことができます。問題は、他の人と同じ瞬間に描画するときに発生します。ユーザごとに

は、それが使用して各ユーザーのキャンバスのための新しいコンテキストを作成します。

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

あなたが別のユーザーと同じ瞬間に描くと、キャンバスが狂ったようにあなたとそれらの座標間に線を引く、それにもかかわらず、異なるコンテキストを使用します。

なぜこのような場合は？一度に複数の線をプロットするために何か他のことをしなければならないのですか？このように複数のコンテキストを作成することはできませんか？

ご協力いただければ幸いです。

Answer 1

The HTML5 Canvas spec says：

の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

私は、あなたのユーザーが描いているのと同じコンテキストだと思っています。受信した描画要求を収集し、必要に応じてキャンバスの内容を構築する1つのペイント方法で組み合わせることをお勧めします。 getContext()ため