Touchmove在画布上绘制两条线而不是一条线

我正在使用jQuery移动UI框架制作PhoneGap应用程序。我需要一个页面，用户将能够在屏幕上绘制的东西。我用这个作为参考，它在Ripple Emulator中工作得很好。然而，在我的实际设备Nexus 4上，每次触控不是一条线，而是两条线。我做的有什么问题吗?

EDIT:我在github中发现了一个类似的问题。这似乎是Android浏览器的问题。这两条线是由于重叠的画布元素。唯一的解决方案是画布尺寸小于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

谢谢!