html5 canvas永久に消去

Question

私はキャンバスを作成していますが、キャンバスにテキストと表示を生成できました。

最初に[POST]ボタンと[クリア]ボタンが正常に機能しています。

私が遭遇する次の問題/バグは、新しい単語を入力してPOSTをクリックすると、 以前の「クリアされた」文字が再び表示されることです。

function updateTotal(){ 
 

 
if (document.getElementById('design3').checked) { 
 
      var canvas2 = document.getElementById("displaycake_text"); 
 
       context = canvas2.getContext("2d"); 
 

 
      var $canvas2 = $("#displaycake_text"); 
 
      var canvasOffset = $canvas2.offset(); 
 
      var offsetX = canvasOffset.left; 
 
      var offsetY = canvasOffset.top; 
 
      var scrollX = $canvas2.scrollLeft(); 
 
      var scrollY = $canvas2.scrollTop(); 
 
      var startX; 
 
      var startY; 
 
      var texts = []; // an array to hold text objects 
 
      var selectedText = -1;// this var will hold the index of the hit-selected text 
 

 
     function draw() { // clear the canvas & redraw all texts 
 
      context.clearRect(0, 0, canvas2.width, canvas2.height); 
 
      for (var i = 0; i < texts.length; i++) { var text = texts[i]; 
 
       context.fillText(text.text, text.x, text.y); } 
 
      } 
 

 
     function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex] 
 
      var text = texts[textIndex]; 
 
      return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y); 
 
      } 
 

 
     function handleMouseDown(d) { 
 
      d.preventDefault(); 
 
       startX = parseInt(d.clientX - offsetX); 
 
       startY = parseInt(d.clientY - offsetY); 
 
      
 
      for (var i = 0; i < texts.length; i++) { 
 
       if (textHittest(startX, startY, i)) { 
 
       selectedText = i; } } 
 
      } 
 

 
     function handleMouseUp(d) { // done dragging 
 
      d.preventDefault(); 
 
      selectedText = -1; } 
 

 
     function handleMouseOut(d) { // also done dragging 
 
      d.preventDefault(); 
 
      selectedText = -1; } 
 

 
     function handleMouseMove(d) { 
 
      if (selectedText < 0) { return; } 
 
      d.preventDefault(); 
 
      mouseX = parseInt(d.clientX - offsetX); 
 
      mouseY = parseInt(d.clientY - offsetY); 
 

 
       var dx = mouseX - startX; 
 
       var dy = mouseY - startY; 
 
       startX = mouseX; 
 
       startY = mouseY; 
 
       var text = texts[selectedText]; 
 
       text.x += dx; 
 
       text.y += dy; 
 
       draw();  } 
 
      
 
      $("#displaycake_text").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events 
 
      $("#displaycake_text").mousemove(function (d) { handleMouseMove(d); }); 
 
      $("#displaycake_text").mouseup(function (d) { handleMouseUp(d); }); 
 
      $("#displaycake_text").mouseout(function (d) { handleMouseOut(d); }); 
 
      $("#text_dedi").click(function() { 
 
       var y = texts.length * 20 + 20; // calc the y coordinate for this text on the canvas 
 
       var text = { text: $("#dedi_text").val(), 
 
        x: 20, 
 
       y: y 
 
       }; 
 

 
      context.font = "30px Roboto"; 
 
      text.width = context.measureText(text.text).width; 
 
      text.height = 16; 
 
      text.color = "#ffffff"; 
 
      texts.push(text); // put this new text in the texts array 
 
      draw(); // redraw everything 
 

 
      
 
      }); 
 
      
 
      //this is the code for CLEAR BUTTON 
 
      document.getElementById('clear').addEventListener('click', function() { 
 
      context.clearRect(0, 0, canvas2.width, canvas2.height); texts = []; }, false); 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- PLS CLICK THE RADIO BUTTON FIRST THEN INSERT & POST --> 
 
<br> <input type="radio" id="design3" name="design_3" onchange="updateTotal()" /> 
 
<span class="radio-chosen"></span> Dedication 
 
<h2> 
 
    <div class="disp_dedi off"> <input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Dedication"> 
 
<button id="text_dedi"> Post </button> 
 
    <input type="button" value="Clear" id="clear" size="23" onchange="updateTotal()"> </div> 
 

 

 
<canvas id="displaycake_text" height="200px" width="400px" style="border-color: #fff; border-style: solid;"> </canvas>

テキスト機能が同様に正常に動作しているドラッグ（私はちょうどそれのソースを発見した） しかし、私のCLEARボタンが問題であり、それはまだ私の削除されたテキストを表示します。 してください、誰も私を助けることができます願っています。どうもありがとうございます ！

Answer 1

@Kaddathがコメントで述べたように、textsアレイは、クリアボタンをクリックしても空になっていません。キャンバスをクリアするときにクリアしてみてください。

document.getElementById('clear').addEventListener('click', function() { 
      context.clearRect(0, 0, canvas2.width, canvas2.height); 
      texts = []; 
    }, false);