Wie lösche ich die Form nicht Kontext in html5 Leinwand

Question

Ich muss eine der Formen (wie Kreis, Rect), aber nicht ganzen Kontext, mit einem anderen Pinsel-Werkzeug zu löschen.

var brush = new Path.Circle({ 
    center: event.point, 
    radius: 35, 
    fillColor: 'red', 
}); 
var eraser = new Path.Circle({ 
    center: event.point, 
    radius: 35 
}); 

Ich versuchte "Ziel-out", "clearRect", aber nichts funktioniert. Ich brauche das Ergebnis genau dem angehängten Bild.

Answer 1

können Sie eine zweite Leinwand verwenden, in dem Sie Ihren Hintergrund ziehen würden, und dann, dank den destination-atop Composite-Modus, halten nur den gewünschten Kreis dieses Bildes, das Sie zurück ziehen werden deine Hauptleinwand.

var eraser = function(evt){ 
 
    var x = evt.clientX - this.offsetLeft; 
 
    var y = evt.clientY - this.offsetTop; 
 

 
    oCtx.globalCompositeOperation = 'source-over'; 
 
    oCtx.drawImage(img, 0,0); 
 

 
    oCtx.globalCompositeOperation = 'destination-atop'; 
 
    oCtx.beginPath(); 
 
    oCtx.arc(x, y, 25, 0, Math.PI*2); 
 
    oCtx.fill(); 
 

 
    ctx.drawImage(offCan, 0,0); 
 
    } 
 

 
main.addEventListener('mousemove', eraser); 
 

 

 
var ctx = main.getContext('2d'); 
 

 
var offCan = main.cloneNode(true); 
 
var oCtx = offCan.getContext('2d'); 
 

 
var draw = function(){ 
 
    ctx.drawImage(this, 0,0); 
 
    ctx.fillStyle = 'red'; 
 

 
    for(var i=0; i<12; i++){ 
 
    ctx.beginPath(); 
 
    ctx.arc(Math.random()*300, Math.random()*150, (Math.random()*25)+10, 0, Math.PI*2); 
 
    ctx.fill(); 
 
    } 
 

 
    }; 
 

 
var img = new Image(); 
 
img.onload = draw; 
 
img.src = "http://lorempixel.com/300/150"; 
 

 

 
// you should not include it in the doc, it's just for explaining how it works. 
 
document.body.appendChild(offCan)

<canvas id="main"></canvas>