Löschen von Zeichnung aus Canvas dauerhaft

Question

Ich habe eine Funktion, die alle Zeichnungen aus dem Hintergrundbild in Canvas löscht, wenn eine Schaltfläche geklickt wird, aber wenn Sie erneut zeichnen, werden die alten (zuvor gelöschten Zeichnungen) wieder angezeigt. Wie kann ich eine so schwer löschen, dass ich die Seite wieder ziehen kann

'use strict'; 

function initCanvas() { 
let bMouseIsDown = false; 
let canvas = document.getElementById('cvs'); 
let ctx = canvas.getContext('2d'); 
let convert = document.getElementById('convert'); 
let sel = 'png'; 
let imgs = document.getElementById('imgs'); 
let imgW = 300; 
let imgH = 200; 

let background = new Image(); 
background.crossOrigin = ''; 
background.src = "http://i.imgur.com/yf6d9SX.jpg"; 

background.onload = function(){ 
    ctx.drawImage(background,0,0,600,400); 
} 
bind(canvas,ctx,convert,sel,imgs,imgW,imgH,bMouseIsDown); 
}; 

initCanvas() 


function bind (canvas,ctx,convert,sel,imgs,imgW,imgH,bMouseIsDown) { 
    let iLastX = 0; 
    let iLastY = 0; 
let iX; 
let iY; 
    canvas.onmousedown = function(e) { 
     bMouseIsDown = true; 
     iLastX = e.clientX - canvas.offsetLeft +   (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); 
     iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); 
    } 
    canvas.onmouseup = function() { 
     bMouseIsDown = false; 
     iLastX = -1; 
     iLastY = -1; 
    } 
    canvas.onmousemove = function(e) { 
     if (bMouseIsDown) { 
      iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); 
      iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); 
      ctx.moveTo(iLastX, iLastY); 
      ctx.lineTo(iX, iY); 
      ctx.stroke(); 
      ctx.strokeStyle = "blue"; 
      ctx.lineJoin = "round"; 
      ctx.lineWidth = 5; 
      iLastX = iX; 
      iLastY = iY; 
     } 
    }; 

    document.getElementById('clear').addEventListener('click',  function() { 
    rerenderImg(); 
    }); 
    function rerenderImg() { 
    iY = []; 
    iX=[]; 
    initCanvas() 
    } 
    }; 

Answer 1

ohne Nachladen Sie tatsächlich clearRect auf der Leinwand laufen soll:

ctx.clearRect(0, 0, canvas.width, canvas.height); 

Answer 2

Sie müssen ctx.beginPath(); aufrufen, bevor auf der Leinwand Zeichnung nochmal. Der logische Ort, um dies zu setzen, ist kurz vor Ihrem Aufruf an ctx.moveTo.

Eine Erklärung, warum dies erforderlich ist, ist here.