Search code examples
javascripthtmlcanvashtml5-canvas

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?

Solution

  • 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.