fillRectの後にCanvasがリセットされない

Question

保存ボタンとリセットボタンでキャンバスを作成しています。キャンバスは自由なドローをサポートしており、サイン用です。

リセットボタンが機能しなくても、保存ボタンが機能します。コードスニペットのHTML：

<div> 
    <canvas id="theCanvas" width="300" height="150" style="-ms-touch-action: none; border: solid 1px #999"></canvas> 
    <div class="btn-group"> 
     <button onclick="resetCanvas();" class="btn btn-danger">Reset</button> 
     <button onclick="saveCanvas();" class="btn btn-primary">Opslaan</button> 
    </div>  
</div> 

コードスニペットのjavascript：私はにbeginPathとclosePathといくつかのソリューションを読み、関数resetCanvasでドローセグメントでそれを試してみた

var canvas, topmenu, context, touches = [], isWriting = false, lastContactPoint, currentTouchId; 
var requestAnimFrame = window.requestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function (callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 

function draw() { 
    if (context) { 
     context.fillStyle = '#FFF'; 
     context.fillRect(0, 0, canvas.width, canvas.height); 
     var i; 
     for (i = 0; i < touches.length; i++) { 
      drawSegment(touches[i]); 
     } 
    } 
    requestAnimFrame(draw); 
} 

function drawSegment(segment) { 
    var i, firstTouch = true; 
    context.beginPath(); 
    for (i = 0; i < segment.length; i++) { 
     var touch = segment[i]; 
     if (firstTouch) { 
      firstTouch = false; 
      context.beginPath(); 
      context.moveTo(touch.x, touch.y); 
      continue; 
     } 
     context.lineTo(touch.x, touch.y); 
    } 

    context.strokeStyle = '#000'; 
    context.lineWidth = 3; 
    context.stroke(); 
    context.closePath(); 
} 

function addTouch(position) { 
    var touchArray = touches[touches.length - 1]; 
    touchArray.push(position); 
} 

requestAnimFrame(function() { 
    draw(); 
}); 

function load() { 
    topmenu = document.getElementsByClassName("navbar-fixed-top")[0] 
    canvas = document.getElementById('theCanvas'); 
    context = canvas.getContext('2d'); 
    canvas.addEventListener('touchstart', function (evt) { 
     evt.preventDefault(); 
     currentTouchId = evt.touches[0].identifier; 
     touches.push([]); 
     position = getPositionFromTarget(evt.touches[0], evt.touches[0].target); 
     addTouch(position); 
    }); 
    canvas.addEventListener('touchmove', function (evt) { 
     evt.preventDefault(); 
     var i, position; 
     for (i = 0; i < evt.changedTouches.length; i++) { 
      if (evt.changedTouches[i].identifier !== currentTouchId) 
       continue; 
      position = getPositionFromTarget(evt.changedTouches[i], evt.changedTouches[i].target); 
      addTouch(position); 
     } 
    }); 
    if (window.navigator.msPointerEnabled) { 
     canvas.addEventListener('MSPointerDown', function (evt) { 
      if (currentTouchId) 
       return; 
      currentTouchId = evt.pointerId; 
      touches.push([]); 
      var position = getPositionFromTarget(evt, evt.target); 
      addTouch(position); 
     }); 
     canvas.addEventListener('MSPointerMove', function (evt) { 
      if (evt.pointerId !== currentTouchId) 
       return; 
      var position = getPositionFromTarget(evt, evt.target); 
      addTouch(position); 
     }); 
     canvas.addEventListener('MSPointerUp', function (evt) { 
      currentTouchId = undefined; 
     }); 
    } 
    else { 
     canvas.addEventListener('mousedown', function (evt) { 
      var position = getPositionFromTarget(evt, evt.target); 
      touches.push([]); 
      addTouch(position); 
      isWriting = true; 
     }); 
     canvas.addEventListener('mousemove', function (evt) { 
      if (isWriting) { 
       var position = getPositionFromTarget(evt, evt.target); 
       addTouch(position); 
      } 
     }); 
     canvas.addEventListener('mouseup', function (evt) { 
      var position = getPositionFromTarget(evt, evt.target); 
      addTouch(position); 
      isWriting = false; 
     }); 
    } 
} 

function getPositionFromTarget(evt, target) { 
    return { 
     y: evt.pageY - (target.offsetTop + (topmenu.clientHeight - 3)), 
     x: evt.pageX - target.offsetLeft 
    }; 
} 

window.addEventListener('load', load); 

function resetCanvas() { 
    context.beginPath(); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.closePath(); 
} 

。

は、私は多分それが理由かもしれない、キャンバスからリスナーを削除しようとした...私が使用してリスナー削除した後が：

//var new_element = canvas.cloneNode(true); 
//canvas.parentNode.replaceChild(new_element, canvas); 

を、私は私が何を、再び描画することができません行方不明？

Answer 1

白い四角形を描画する代わりに、キャンバスをクリア/リセットするにはclearRect()メソッドを使用します。

touchesアレイ（保存されたセグメントがループで描画されるため）をリセットする必要があります。

function resetCanvas() { 
    touches = []; //reset 'touches' array 
    context.clearRect(0, 0, canvas.width, canvas.height); //clear canvas 
}