私はJavaScriptを使用してHTML5キャンバス上に画像を集めている以下の機能を持たせてジャバスクリプト

Question

を使用してそこに配置されているHTML5のキャンバスから画像を削除する：画像をボタンとして使用されようとしている

function drawStartButton(){ 
      image.onload = function(){ 
       context.drawImage(image, 260.5, 60); 
      }; 
      image.src = "StartButton.png"; 

      var boundingBox = myGameCanvas.getBoundingClientRect(); 

      boundingBox.onmousemove = function(e){ 
       var mouseX = e.pageX - this.offsetLeft; 
       var mouseY = e.pageY - this.offsetTop; 
       var pixels = context.getImageData(mouseX, mouseY, 1, 1); 
      } 
     } 

をクリックすると別の関数が呼び出されます。私はボタンがクリックされたときに呼び出したい関数は次のとおりです。

function drawLevelOneElements(){ 
      image.onload = function(){ 
       context.drawImage(image, 50, 30, 20, 20); 


      }; 
      image.src = "1.png"; 
} 

私はボタンをクリックをリッスンし、そして時にクリックocurrsその関数を呼び出してキャンバスにイベントリスナーを追加しました。ただし、drawLevelOneElements（）関数が呼び出されてキャンバスに描画されますが、drawStartButton（）の呼び出しによって描画されたイメージもキャンバスに表示されますが、両方の関数の内容が表示されます同時にキャンバスを作成します。

ボタンがクリックされ、ボタンが消え、drawLevelOneElementsによって描画された要素がキャンバス上に表示され、開始ボタンがなくなります。

drawStartButton（）で描画された画像をキャンバスに描画した後にキャンバスから取り除く方法を教えてもらえますか？

ありがとうございました。

Answer 1

一般に、キャンバス全体の幅や高さの値を設定すると、キャンバス全体を消去できます。

キャンバスの1つの領域をクリアするには、その領域にfillRectを描画します。たとえば、fillStyleをキャンバスの背景色と同じ色に設定します。

context.fillStyle = this.fill; 
context.fillRect(x, y, width, height);