title: How can I stop this canvas animation drawing new particles after 5 seconds and restart it from zero particles on click?
body: <p>I would like to stop drawing new particles after 5 seconds and restart drawing on click anywhere.</p>
  
  <p>Here is the code <a href="https://codepen.io/Jeremboo/pen/ENVaMY" rel="nofollow noreferrer">https://codepen.io/Jeremboo/pen/ENVaMY</a> for the animation.</p>
  
  <p>Right now it keeps on drawing until you click on the screen to restart it again. </p>
  
  <p>What I want is to stop drawing after 5 seconds and then on click anywhere restart it from zero particles. I tried the following to stop but I am not able to start it again.</p>
  
  <p>this is the js code </p>
  
  <pre><code>/**/ const canvas = document.createElement('canvas');
  /**/ const context = canvas.getContext('2d');
  /**/ let windowWidth = canvas.width = window.innerWidth;
  /**/ let windowHeight = canvas.height = window.innerHeight;
  /**/ canvas.id = 'canvas';
  /**/ document.body.insertBefore(canvas, document.body.firstChild);
  /**/ /* ---- CORE END ---- */
  /* ---- CREATING ZONE ---- */
  
  /* ---- SETTINGS ---- */
  const numberParticlesStart = 1000;
  const particleSpeed = 0.3;
  const velocity = 0.9;
  const circleWidth = 50;
  
  /* ---- INIT ---- */
  let particles = [];
  
  const getRandomFloat = (min, max) =&gt; (Math.random() * (max - min) + min);
  
  
  /* ---- Particle ---- */
  function Particle (x, y) {
    this.x = x;
    this.y = y;
  
    this.vel = {
      x : getRandomFloat(-20, 20)/100,
      y : getRandomFloat(-20, 20)/100,
      min : getRandomFloat(2, 10),
      max : getRandomFloat(10, 100)/10
    }
  
    this.color = 'rgba(255, 255, 255, 0.05)';
  }
  Particle.prototype.render = function() {
    context.beginPath();
    context.fillStyle = this.color;
    context.arc(this.x, this.y, 1, 0, Math.PI * 2);
    context.fill();
  };
  Particle.prototype.update = function() {
  
    const forceDirection = {
      x: getRandomFloat(-1, 1),
      y: getRandomFloat(-1, 1),
    };
  
    if (Math.abs(this.vel.x + forceDirection.x) &lt; this.vel.max) {
      this.vel.x += forceDirection.x;
    }
    if (Math.abs(this.vel.y + forceDirection.y) &lt; this.vel.max) {
      this.vel.y += forceDirection.y;
    }
  
    this.x += this.vel.x * particleSpeed;
    this.y += this.vel.y * particleSpeed;
  
    if (Math.abs(this.vel.x) &gt; this.vel.min) {
      this.vel.x *= velocity;
    }
    if (Math.abs(this.vel.y) &gt; this.vel.min) {
      this.vel.y *= velocity;
    }
  
    this.testBorder();
  };
  Particle.prototype.testBorder = function() {
    if (this.x &gt; windowWidth) {
      this.setPosition(this.x, 'x');
    } else if (this.x &lt; 0) {
      this.setPosition(windowWidth, 'x');
    }
    if (this.y &gt; windowHeight) {
      this.setPosition(this.y, 'y');
    } else if (this.y &lt; 0) {
      this.setPosition(windowHeight, 'y');
    }
  };
  Particle.prototype.setPosition = function(pos, coor) {
    if (coor === 'x') {
      this.x = pos;
    } else if (coor === 'y') {
      this.y = pos;
    }
  };
  
  /* ---- Functions ----*/
  function loop() {
    let i;
    const length = particles.length;
    for (i = 0; i &lt; length; i++) {
      particles[i].update();
      particles[i].render();
    }
    requestAnimationFrame(loop);
  }
  
  /* ---- START ---- */
  function init() {
    let i;
    for (i = 0; i &lt; numberParticlesStart; i++) {
      const angle = Math.random() * 360;
      particles.push(new Particle(
        windowWidth * 0.5 + (Math.cos(angle) * circleWidth),
        windowHeight * 0.5 - (Math.sin(angle) * circleWidth),
    ));
    }
  }
  init();
  window.onresize = () =&gt; {
     windowWidth = canvas.width = window.innerWidth;
     windowHeight = canvas.height = window.innerHeight;
     particles = [];
     context.clearRect(0,0, windowWidth, windowHeight);
     init();
  }
  
  window.addEventListener('click', () =&gt; {
    particles = [];
    context.clearRect(0,0, windowWidth, windowHeight);
    init();
  });
  
  loop();
  </code></pre>
  
  <p>i replaced the function loop() with this to stop it after 5 seconds -</p>
  
  <pre><code>function loop(stp) {
    let i;
    const length = particles.length;
    for (i = 0; i &lt; length; i++) {
      particles[i].update();
      particles[i].render();
    }
  if (stp &gt; 5000) return;
    requestAnimationFrame(loop);
  }
  </code></pre>