畫布，我的橡皮擦不起作用

Question

我試圖提供一個橡皮擦，就像它是一把刷子一樣，可以清晰地擦除。我有一個黑色的矩形和作爲畫布背景的圖片。我怎樣才能清除rect的一部分？

"Erasing" in html5 canvas，沒有工作

我的小提琴：http://jsfiddle.net/FgNQk/10/

var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var width = window.innerWidth; 
    var height = window.innerHeight; 
    canvas.height = height; 
    canvas.width = width; 

    ctx.fillRect(100,100,100,100); 

    canvas.addEventListener('mousedown', function(e) { 
     this.down = true; 
     this.X = e.pageX ; 
     this.Y = e.pageY ; 
     this.color = rgb(); 
    }, 0); 
    canvas.addEventListener('mouseup', function() { 
     this.down = false;   
    }, 0); 
    canvas.addEventListener('mousemove', function(e) { 

     if(this.down) { 
      with(ctx) { 
       beginPath(); 
       moveTo(this.X, this.Y); 
       lineTo(e.pageX , e.pageY); 
       strokeStyle = "rgba(255,255,255,0.0)"; 
       ctx.lineWidth=1; 
       stroke(); 
      } 
      this.X = e.pageX ; 
      this.Y = e.pageY ; 
     } 
    }, 0); 

Answer 1

在鏈路解決方案的實際工作。試試：

with(ctx) { 
        beginPath(); 
        moveTo(this.X, this.Y); 
        lineTo(e.pageX , e.pageY); 
        globalCompositeOperation = "destination-out"; 
        strokeStyle = "rgba(0,0,0,1)"; 
        ctx.lineWidth=1; 
        stroke(); 
       }