Javascript & Canvas: Draw and delete lines to create a "breathing" circle

Question

I would like to create an element, that shows a red circle. Once the user clicks on it, she can record her voice. In order to show the LIVE mode, I'd like to make the circle "breath" according to the incoming frequencies.

I'm experimenting with a <canvas> element. That means it creates a circle that gets bigger and smaller, depending on the variable arcrad. However, the lines are being drawn correctly, but they do not disappear afterwards. I tried to apply .clip() but can't get it to work...

if (arcrad <= 10) arcrad = 10;
analyserContext.beginPath();
analyserContext.arc(100,120,arcrad,0,2*Math.PI);
analyserContext.closePath();
analyserContext.lineWidth = 2;
analyserContext.strokeStyle = 'red';
analyserContext.stroke();

Any ideas - or completely different strategies for this use case?

Answer 1

Canvas will overdraw by default. For your animation you’ll need to clean the canvas at the start of each frame. Use something the following at the start of your drawing function:

analyserContext.clearRect(0,0,200,200);

assuming your canvas is 200 pixels wide and high. It’s worth pointing out that sometimes you don’t want to completely clear the animation field every frame. For example, if you were to draw a semi transparent rectangle over the frame at the beginning (instead of clearing it) then you’d end up with a basic ‘bullet time’ style effect.

Answer 2

It's a normal behavior. Once something it's drawn on the canvas, it's there forever. You have to think like if you were painting something: what has been done cannot be undone. Luckily, you still have solutions:

1) redraw another circle on top of the first one with the background color. It's really not the recommend way, but it still can be useful

2) use clearRect method (see How to clear the canvas for redrawing)

Answer 3

There are numerous ways to clear a canvas pre drawing to create animation: How to clear the canvas for redrawing

simplest in my mind:

canvas.width=canvas.width;

though can equally use clearRect (which is actually quicker and won't reset the entire canvas if that is an issue regarding transforms etc!) over the region or whole canvas.

Get the likes of:

http://jsfiddle.net/dw17jxee/