отменить на холсте не работает правильно

Question

Я пытаюсь добавить функциональность отмены в холст. Но он работает неправильно.

Issue -

Пусть говорят, что я нарисовал 3 линии отдельно на холсте, но когда я начать делать отменить на него,

второй щелчок - это показывает 2 линии

третий щелчок - это показать 1 линия

Когда я начинаю снова рисовать на холсте, все линии перерисованы то есть все три линии перерисованы

Пожалуйста, проверьте этот fiddle и рисовать на ней

Мой код ниже

HTML

<canvas id="c" width="500" height="300"></canvas> <input type='button' onClick='undoDrawOnCanvas();' id='btnUndo' value='Undo drawing'>

CSS

canvas { border: 1px solid #ccc }

JS

var el = document.getElementById('c'); 
var ctx = el.getContext('2d'); 
var isDrawing; 
var restorePoints = []; 

el.onmousedown = function(e) { 
    isDrawing = true; 
    ctx.lineWidth = 10; 
    ctx.lineJoin = ctx.lineCap = 'round'; 
    ctx.moveTo(e.clientX, e.clientY); 
}; 
el.onmousemove = function(e) { 
    if (isDrawing) { 
     ctx.lineTo(e.clientX, e.clientY); 
     ctx.stroke(); 
    } 
}; 
el.onmouseup = function() { 
    isDrawing = false; 
    saveRestorePoint(); 
}; 


function saveRestorePoint() { 
    var oCanvas = document.getElementById("c"); 
    var imgSrc = oCanvas.toDataURL("image/png"); 
    restorePoints.push(imgSrc); 
} 


function undoDrawOnCanvas() { 
    if (restorePoints.length > 0) { 
     var oImg = new Image(); 
     oImg.onload = function() { 
      ctx.clearRect(0, 0, el.width, el.height);    
      ctx.drawImage(oImg, 0, 0); 
     } 
     oImg.src = restorePoints.pop(); 
    } 
} 

Answer 1

Я добавил beginPath() к onmousedown событию.

Может быть, обновленный код в этой скрипкой является то, что вы ищете:

https://jsfiddle.net/dc67eaop/4/