キャンバスでの関数のクリアが正常に機能していない

Question

コードペインで[キャンバスをクリア]ボタンをクリックすると、キャンバスがクリアされたように表示されますが、再度描画しようとすると古い行がすべて再表示されます。

//Redraw 
function redraw(){ 
    $("#clearcanvas").click(function() { 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
    }); 
    context.strokeStyle = "#df4b26"; 
    context.lineJoin = "round"; 
    context.lineWidth = 5; 

    for(var i=0; i < clickX.length; i++) {  
     context.beginPath(); 
     if(clickDrag[i] && i){ 
     context.moveTo(clickX[i-1], clickY[i-1]); 
     } 
     else { 
     context.moveTo(clickX[i]-1, clickY[i]); 
     } 
     context.lineTo(clickX[i], clickY[i]); 
     context.closePath(); 
     context.stroke(); 
    } 
} 

全コード：http://codepen.io/urketadic/pen/AXGKvp

Answer 1

あなたがclickX、clickY、およびclickDragである配列内の各引かれた線のための情報を格納しているため。キャンバスは、キャンバスをクリアした後でも、それぞれの線を描画します。あなたがしたいことは、それらの配列アイテムを空にすることです：

$("#clearcanvas").click(function() { 
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
    clickX = []; clickY = []; clickDrag = []; // or 'new Array()' or '.length = 0' 
}); 

Answer 2

彼らはclickXにしてclientYに保存されている、とあなたは基本的にキャンバスに描くとき、​​あなたのコード内でredrawメソッドを呼び出して、そのため、古い行が再登場していますこれらのオブジェクトのすべてを描画します。あなたはこれらのオブジェクトの両方をクリアするために行方不明です。

（私は1つ、clickDragを忘れてました。）

をその参照を失うことなく、配列（オブジェクト）をクリアするには、単に0にその'length'プロパティを設定します。

clientX.length = 
clientY.length = 
clickDrag.length = 0