Javascript html画布未清除

我在这里支了支钢笔

我正在使用mosuedown方法，然后使用事件来画线，如下所示：

var signTouch=false;
var penWidth=2;
var el = document.getElementById('signPad');
var jqEl = jQuery('#signPad')
var ctx = el.getContext('2d');
ctx.lineWidth = penWidth;
ctx.canvas.width=window.innerWidth;
var isDrawing;


el.onmousedown = function(e) {
  signTouch=true;
  isDrawing = true;
  ctx.lineWidth = penWidth;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
};

el.onmousemove = function(e) {
  if (isDrawing) {
  console.log(e);
    ctx.lineTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    ctx.stroke();
  }
};

el.onmouseup = function() {
  isDrawing = false;
};


$(document).on('pageshow', '#index' ,function () {
 $("#popupCloseRight").popup( "open" );

});


$("#nextchk").click(function(){  
       ctx.clearRect(0,0,el.width,el.height);
 });

最后一个函数应该清除画布。它确实会将其清除，但之前绘制的画布上的线条会重新出现

我没有使用任何数组来存储路径，但是我在e.clickX中缺少一些基本知识。它是数组吗

---

<>请建议

你必须每次启动一条新的路径，否则画布仍然会“记住”前面的行，因为它将把它们看成是同一条路径。

el.onmousedown=函数（e）{
ctx.beginPath（）；
//启用绘图
};

var signTouch=false；
var-penWidth=2；
var el=document.getElementById（'signPad'）；
var jqEl=jQuery（“#signPad”）
var ctx=el.getContext（'2d'）；
ctx.lineWidth=penWidth；
ctx.canvas.width=window.innerWidth；
var提取；
el.onmousedown=函数（e）{
ctx.beginPath（）；
signTouch=true；
isDrawing=true；
ctx.lineWidth=penWidth；
ctx.lineJoin=ctx.lineCap='round'；
移动到（e.clientX-jqEl.position（）.left，e.clientY-jqEl.position（）.top）；
};
el.onmousemove=功能（e）{
if（isDrawing）{
控制台日志（e）；
ctx.lineTo（e.clientX-jqEl.position（）.left，e.clientY-jqEl.position（）.top）；
ctx.stroke（）；
}
};
el.onmouseup=函数（）{
isDrawing=false；
};
$（“#mypanel a”）。单击（函数（）{
if（$（this）.index（）==3）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
美元（“#我的面板”）。面板（“关闭”）；
}
});
$（“#mypanel”）。在（“panelclose”上，函数（事件，用户界面）{
log（$（“#滑块”）.val（））；
penWidth=$（“#滑块”）.val（）；
});
$（“#nextchk”）。单击（函数（）{
ctx.clearRect（0，0，标高宽度，标高高度）；
});

演示
演示

尺寸：
您从未创建过ctx.beginPath（）；因此，它将始终保存原始图形

 el.onmousedown = function(e) {
      signTouch=true;
      isDrawing = true;
      ctx.beginPath();
      ctx.lineWidth = penWidth;
      ctx.lineJoin = ctx.lineCap = 'round';
      ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    };

啊，@Oriol打败了我：）