javascript - キャンバス上に1本ではなく2本の線を描くタッチムーブ

Question

jQuery Mobile UI フレームワークで PhoneGap アプリケーションを作成しています。ユーザーが画面に描画できるページが必要です。これを参考に使用しましたが、Ripple Emulator でうまく機能します。ただし、実際のデバイスである Nexus 4 では、タッチムーブごとに 1 行ではなく、2 行表示されます。私がしていることに何か問題がありますか？

編集: github で報告された同様の問題を見つけました。Androidのブラウザの問題のようです。2 つの線は、キャンバス要素が重なっていることが原因でした。唯一の解決策は、キャンバス サイズを 256px 未満にすることです。リンクは次のとおりです: https://github.com/jquery/jquery-mobile/issues/5107

これが私のコードです

// start canvas code

var canvas = null; //canvas object
var context = null; //canvas's context object
var clearBtn = null; //clear button object
var buttonDown = false;

function captureDraw(){
    canvas = document.getElementById('canvas');
    clearBtn = document.getElementById('clearBtn');

    setCanvasDimension();
    initializeEvents();

    context = canvas.getContext('2d');
}

function setCanvasDimension() {
  //canvas.width = 300; 
  // canvas.width = window.innerWidth;
  // canvas.height = window.innerHeight; //setting the height of the canvas
}

function initializeEvents() {
  canvas.addEventListener('touchstart', startPaint, false);
  canvas.addEventListener('touchmove', continuePaint, false);
  canvas.addEventListener('touchend', stopPaint, false);

  clearBtn.addEventListener('touchend', clearCanvas,false);
}

function clearCanvas() {
  context.clearRect(0,0,canvas.width,canvas.height);
}

function startPaint(evt) {
  if(!buttonDown)
  {
    context.beginPath();
    context.moveTo(evt.touches[0].pageX, evt.touches[0].pageY);
    buttonDown = true;
  }
  evt.preventDefault();
}

function continuePaint(evt) {
  if(buttonDown)
  {
    context.lineTo(evt.touches[0].pageX,evt.touches[0].pageY);
    context.stroke();
  }
}

function stopPaint() {
  buttonDown = false;
}

// end canvas code

ありがとう！