title: HTML5 Canvas Growing Circles
body: <p>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: <a href="http://jsfiddle.net/VZ8R4/" rel="nofollow">http://jsfiddle.net/VZ8R4/</a> </p>
  
  <p>I think that the error is in the circ() function:</p>
  
  <pre><code>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&lt;=canvas.width){
              function2();
          }
      }
  
  }
  </code></pre>
  
  <p>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.</p>