Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 780
Alex Ivasyuv Avatar asked Aug 25 '10 10:08

Alex Ivasyuv


People also ask

How do you clear a canvas element?

To clear the Canvas, you can use the clearRect() method. This method performs pretty well than others for clearing the canvas (such as resetting the width/height, destroying the canvas element and then recreating it, etc..) const context = canvas. getContext('2d'); context.

How do you fill a circle in canvas?

The arc() method creates an arc/curve (used to create circles, or parts of circles). Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math. PI. Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.


1 Answers

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.

like image 78
MooGoo Avatar answered Oct 21 '22 11:10

MooGoo