如何清除矩形边框？ （JS，Canvas）

Question

I'm trying to clear only the strokeRect() and keep content in that rectangle. In this example, how do I clear green rectangle without affecting the red one?

  var cut = [50, 70, 100, 100] var cut1 = [60, 85, 60, 60] var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.rect(cut[0], cut[1], cut[2], cut[3]); ctx.lineWidth = 3; ctx.strokeStyle = 'green'; ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.rect(cut1[0], cut1[1], cut1[2], cut1[3]); ctx.lineWidth = 3; ctx.strokeStyle = 'red'; ctx.stroke(); ctx.closePath(); 

 <canvas id="canvas" width=400px height=200px></canvas> 

Can't figure out how.. Thanks in advance!

Answer 1

You need to clear the canvas and draw the red rectangle again.

 var c = document.getElementById("canvas"); c.width=400; c.height=200; var ctx = c.getContext("2d"); var cut = [50, 70, 100, 100] var cut1 = [60, 85, 60, 60] function drawRectangle(cut,fill){ ctx.beginPath(); ctx.rect(cut[0], cut[1], cut[2], cut[3]); ctx.lineWidth = 3; ctx.strokeStyle = fill; ctx.stroke(); ctx.closePath(); } drawRectangle(cut,"green"); drawRectangle(cut1,"red"); clear.addEventListener("click",()=>{ ctx.clearRect(0,0, c.width, c.height); drawRectangle(cut1,"red"); }); 

 canvas{display:block;} 

 <button id="clear">clear</button> <canvas id="canvas" width=400px height=200px></canvas> 

Answer 2

In your case, clear & redraw is what you really need, but just for completeness, to clear in any shape, you can use compositing operations .

By setting the compositing mode to destination-out , all the pixels that should normally have been filled by your drawings will actually get rendered as transparent.

So to make a simple clear-stroke-rect:

 var ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(20, 20, 80, 80); // clear ctx.globalCompositeOperation = 'destination-out'; ctx.lineWidth = 5; ctx.strokeRect(40,40,30,30); // set back to 'normal' ctx.globalCompositeOperation = 'source-over'; 

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

But using compositing, you can really clear in any shape, even from bitmap with transparency:

 var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function() { ctx.fillStyle = 'red'; ctx.fillRect(20, 20, 80, 80); // clear ctx.globalCompositeOperation = 'destination-out'; ctx.drawImage(img, 40,40); // set back to 'normal' ctx.globalCompositeOperation = 'source-over'; }; img.src = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png'; 

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