Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

clearing circular regions from HTML5 Canvas

It appears the only way to clear a region from a canvas is to use the clearRect() command - I need to clear a circle (I am masking out areas from a filled canvas, point lights in this specific case) and despite all attempts it does not seem possible.

I tried drawing a circle with an alpha value of 0 but simply nothing would appear unless the alpha was higher (which is counter to the point :P) - I assume because a contex.fill() draws it as an add rather than a replace.

Any suggestions on how I might be able to (quickly) clear circles for mask purposes?

like image 380
David Burford Avatar asked May 01 '12 11:05

David Burford


People also ask

How do you delete a path on canvas?

First of all, there is no need to use save and restore method. Second, use beginPath method before drawing the line, as you are creating a new path. beginPath will reset / clear the previous path ...

How do you clear canvas and redraw?

We can clear the canvas easily with the clearRect method, which is part of the canvas context object. to draw something and add a click listener to the button to clear the canvas when we click the button. We call getContext to get the context object.

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.


Video Answer


1 Answers

Use .arc to create a circular stroke and then use .clip() to make that the current clipping region.

Then you can use .clearRect() to erase the whole canvas, but only the clipped area will change.

like image 178
Alnitak Avatar answered Sep 21 '22 17:09

Alnitak