タッチイベントを使って Canvas 要素にお絵描きをしようとしているのですが、 Android 4.2 で context.beginPath() すると、まず前回のパスが描画され、その続きとしてパスが描画されてしまいます。
JavaScript
1touchstart (evn) { 2 var pnt = point(evn); 3 context.beginPath(); 4 context.moveTo(pnt.x, pnt.y); 5 drawing = true; 6} 7touchmove (evn) { 8 if (!drawing) return; 9 evn.preventDefault(); 10 var pnt = point(evn); 11 context.lineTo(pnt.x, pnt.y); 12 context.stroke(); 13} 14touchend (evn) { 15 if (!drawing) return; 16 var pnt = point(evn); 17 context.lineTo(pnt.x, pnt.y); 18 context.stroke(); 19 drawing = false; 20} 21clear () { 22 context.clearRect(0, 0, canvas.width(), canvas.height()); 23}
特に、一度パスを描画してから上記 clear() で消去した後、 touchstart が発火すると、消去する前のパスが表示され、その続きでパスが描画されます。
Android 4.4 や iOS では同様の現象が起きないので、少なくとも Android 4.2 に起因する問題かと思っているのですが、対処方法はありますでしょうか。
どうぞよろしくお願い致します。
あなたの回答
tips
プレビュー