title: Creating animated rainbows via pure js
body: <p>The code (pure js) is for creating animated rainbow in which the successive rainbows are delayed by a bit of time. But the animation is not consistent (slows down eventually). I am just a beginner in programming so my code is getting lengthy too.</p>
  
  <p>if you run the code on local, the animation slows down after a bit of time and there is no consistency in the way the rainbows are coming out (there should be a time gap between each rainbow). My second issue is I want to reduce the code so that I dont have to create a function for each and every rainbow animation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function anim()
  {
    var x,y,z,p,q,r;
    x = y = z = p = q = r  = 2*Math.PI;
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0,0,c.width,c.height);
  
    var id = setInterval(frame_one,1);
    var t = setInterval(frame_two,1);
    var u = setInterval(frame_three,1);
    var v = setInterval(frame_four,1);
    var w = setInterval(frame_five,1);
    var s = setInterval(frame_six,1);
    function frame_one()
    {
      if (x &lt;=(Math.PI)) 
      {
        clearInterval(id);
        x = 2*Math.PI;
      }
      else
      {
        x = x - 0.036;
        ctx.lineWidth = 20;   
        ctx.beginPath();
        ctx.arc(c.width/2, c.height/2, c.height/2-20, 2* Math.PI,x,true);
        ctx.strokeStyle="red";
        ctx.stroke();   
      }  
    }  
    function frame_two()
    {
      if (y &lt;= (Math.PI)) 
      {
        y  = 2*Math.PI;
        clearInterval(t);
      }
      else 
      {
        y= y - 0.032;   
        ctx.beginPath();
        ctx.lineWidth=20;
        ctx.arc(c.width/2,c.height/2, c.height/2-40, 2* Math.PI,y,true);
        ctx.strokeStyle="orange";
        ctx.stroke();  
      }
    }  
    function frame_three()
    {
      if (z &lt;= (Math.PI)) 
      {
        clearInterval(u);
      }
    else 
      {
        z = z - 0.028;   
        ctx.beginPath();
        ctx.lineWidth = 20;
        ctx.arc(c.width/2,c.height/2,(c.height)/2-60, 2* Math.PI,z,true);
        ctx.strokeStyle = "yellow";
        ctx.stroke();
      }
    }  
    function frame_four()
    {
      if (p &lt;= (Math.PI)) 
      {
          clearInterval(v);
      }
      else 
      {
        p = p - 0.024;   
        ctx.beginPath();
        ctx.lineWidth = 20;
        ctx.arc(c.width/2,c.height/2,(c.height)/2-80, 2* Math.PI,p,true);
        ctx.strokeStyle = "green";
        ctx.stroke();
      }
    }  
    function frame_five()
    {
      if (q &lt;= (Math.PI)) 
      {
        clearInterval(w);
      }
      else 
      {
        q = q - 0.020;   
        ctx.beginPath();
        ctx.lineWidth = 20;
        ctx.arc(c.width/2,c.height/2,(c.height)/2-100, 2* Math.PI,q,true);
        ctx.strokeStyle = "blue";
        ctx.stroke();
      }
    }  
    function frame_six()
    {
      if (r &lt;= (Math.PI)) 
      {
        clearInterval(s);
      }
      else 
      {
        r = r - 0.016;   
        ctx.beginPath();
        ctx.lineWidth = 20;
        ctx.arc(c.width/2,c.height/2,(c.height)/2-120, 2* Math.PI,r,true);
        ctx.strokeStyle = "violet";
        ctx.stroke();
      }
    }         
  }
  anim();
  setInterval(anim,3000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas onclick="info()" id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>