キャンバスをクリアして画像を再読み込みしますか？

Question

私はここで何が間違っていますか？

私はcanvsにhtml5イメージタグを使ってイメージを書いています。 新しい画像の最後の画像をクリックしてください。 画像を読み込むことはできますが、次の画像をクリックすると最後に読み込まれた画像と重なります。 ここにコードがあります。 私は試しています（）関数を使用するには

  function drawImage(imageObj){ 

      var stage = new Kinetic.Stage("container", 578, 500); 
      var layer = new Kinetic.Layer(); 
      var x = stage.width/2 - 200/2; 
      var y = stage.height/2 - 137/2; 
      var width = 200; 
      var height = 137; 

      // darth vader 
      var darthVaderImg = new Kinetic.Shape(function(){ 
       var context = this.getContext(); 

       context.clearRect(x,y,width,height); 
       context.drawImage(imageObj, x, y, width, height); 
       // draw invisible detectable path for image 
       context.beginPath(); 
       context.rect(x, y, width, height); 
       context.closePath(); 


      }); 

Answer 1

これをチェックするpost

canvas.width = canvas.width; 

キャンバスをクリアする必要があります。

Answer 2

使用私はこのようにそれを呼び出し

を作成し、この機能 - clearCanvasGrid(/id of the canvas/)

function clearCanvasGrid(canvasname){ 
      var canvas = document.getElementById(canvasname); //because we are looping //each location has its own canvas ID 
      var context = canvas.getContext('2d'); 
      //context.beginPath(); 

      // Store the current transformation matrix 
      context.save(); 

      // Use the identity matrix while clearing the canvas 
      context.setTransform(1, 0, 0, 1, 0, 0); 
      context.clearRect(0, 0, canvas.width, canvas.height); 

      // Restore the transform 
      context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING 

     }