What's an alternative to clearRect()?

Question

clearRect() clears canvas properties in a rectangular form, how to clear in circular?

Answer 1

Strictly answering the title you can also do this, which may be faster:
cvs.width = cvs.width; // quickly reset some stuff

Canvas uses a rectangle model, even for 'pixels'. To clear a circle...
...in the simple case I'd probably just draw an arc of the right size and then fill it (arc from 0 to 2*Math.PI, or in degrees form below)

ctx.fillStyle = '...';
ctx.arc(centerX, centerY, arcRadius, (Math.PI/180)*0, (Math.PI/180)*360, false);
ctx.fill();

...in a more complex case you could rotate a shape, like a rectangle through 90 degrees (Math.pi/2)...but not efficient. I also have code to rotate a pixel through 360° + fill (if you want it).

I can add a link discussing putImageData() with transparency -- just an idea; not tested.

Answer 2

Using clearRect() essentially erases the canvas in the location you specify. There is no reason to use it in circular form, but you can always use a normal fillRect or arc circle to "erase" an area just by making it the background color. This is why I always use a background color, instead of using clearRect, because clearRect makes it white, I believe. I use:

ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.rect(0, 0, ctx.width, ctx.height);
ctx,fill();

If you could clarify your question, that would help. What are you using it for?

Answer 3

Thanks for the answers.
Let's remember each one teaches the other. I appreciate your help.

Just to clarify the question, incase of animation -> to create a clean animation you would use the method clearRect() i.e
ctx.clearRect(x,y, width, height); (just Syntax) to avoid creating unintentional pattern.

Then how would you use the same method, and avoid unnecessarily clearing/erasing other parts of drawing.