CODEWITHSUNDEEP
javascripthtmlcanvas
Alex Ivasyuv
Alex Ivasyuv

Reputation: 8824

How can I clear an arc or circle in HTML5 canvas?

I found that there's a clearRect() method, but can't find any to clear an arc (or a full circle).

Is there any way to clear an arc in canvas?

Upvotes: 28

Views: 47530

Answers (6)

Squirrl
Squirrl

Reputation: 4966

Make sure to call beginPath()

function animate (){
 requestAnimationFrame(animate)

  c.clearRect(0,0,canvas.width,canvas.height); 

  c.beginPath();
  c.arc(x,y,40,0,Math.PI * 2,false); 
  c.strokeStyle='rgba(200,0,0,1)';
  c.stroke();

 c.fillStyle ='rgba(0,0,0,1)';
 c.fillRect(x,y,100,100);
 x++


} animate()

Credit to @Gabriele Petrioli in this answer: Why doesn't context.clearRect() work inside requestAnimationFrame loop?

Upvotes: 3

Chris Cousins
Chris Cousins

Reputation: 1912

Here's an updated fiddle for you too (uses clearRect): https://jsfiddle.net/x9ztn3vs/2/

It has a clearApple function:

block.prototype.clearApple = function() {
    ctx.beginPath();
    ctx.clearRect(this.x - 6, this.y - 6, 2 * Math.PI, 2 * Math.PI);
    ctx.closePath();
}

Upvotes: 0

mikemaccana
mikemaccana

Reputation: 123148

This is a circular equivalent of clearRect(). The main thing is setting up a composite operation per @moogoo's answer. 

var cutCircle = function(context, x, y, radius){
    context.globalCompositeOperation = 'destination-out'
    context.arc(x, y, radius, 0, Math.PI*2, true);
    context.fill();
}

See https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html:

Upvotes: 17

MooGoo
MooGoo

Reputation: 48240

There is no clearArc however you can use Composite Operations to achieve the same thing

context.globalCompositeOperation = 'destination-out'

According to MDC the effect of this setting is

The existing content is kept where it doesn't overlap the new shape.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

So any filled shape with this mode on will end up erasing current canvas content.

Upvotes: 48

robertc
robertc

Reputation: 75707

Nope, once you've drawn something on a canvas there is no object to clear, just the pixels you've drawn. The clearRect method doesn't clear a previously drawn object, it just clears the pixels in the space defined by the parameters. You can use the clearRect method to clear the arc if you know a rectangle which contains it. This will of course clear any other pixels in the area, so you'll have to redraw them.

Edit: MooGoo has given a much better answer below

Upvotes: 15

reta
reta

Reputation: 101

You can use the clearRect() method to erase a portion of the canvas (including your arc), but when you're using clearRect() with arcs or anything else that you used beginPath() and closePath() for while drawing, you'll need to handle the paths while erasing, too. Otherwise, you may end up with a faded version of your arc still appearing.

//draw an arc (in this case, a circle)
context.moveTo(x, y);
context.beginPath();
context.arc(x,y,radius,0,Math.PI*2,false);
context.closePath();
context.strokeStyle = "#ccc";
context.stroke();

//now, erase the arc by clearing a rectangle that's slightly larger than the arc
context.beginPath();
context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2);
context.closePath();

Upvotes: 10

Related Questions