HTML5 Canvas Growing Circles

HTML5 Canvas Growing Circles

I am trying to make it so that, when a user click anywhere on the screen,
a circle will appear at the point of clicking, and proceed to grow. I
don't want to use jQuery, if possible. I made a JSFiddle:
http://jsfiddle.net/VZ8R4/
I think that the error is in the circ() function:
function circ(x, y, rad, c){
ctx.beginPath();
ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
ctx.lineWidth = 5;
ctx.strokeStyle = c;
ctx.stroke();
function2();
function function2(){
ctx.beginPath();
ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
ctx.lineWidth = 5;
ctx.strokeStyle = c;
ctx.stroke();
rad+=3;
if(rad<=canvas.width){
function2();
}
}
}
My error seems to be that, instead of showing the circle grow, it is just
showing all of the circles stacked up. Ideally, a user would be able to
click in two or three places and see multiple circles growing. Any help is
appreciated. Thanks.