title: How to store functions into an array and loop through each in javascript
body: <pre><code>function canvasApp() {
  
  if (!canvasSupport()) {
           return;
      }
  
  function drawScreen() {
  
  
      context.font ="13px sans";
  
      context.fillStyle = "#000";
      context.beginPath();
      context.arc(p1.x,p1.y,9,0,Math.PI*2,true);
      context.closePath();
      context.fill();         
      context.fillStyle = "#FFFFFF";
      context.fillText("1",p1.x-2,p1.y+2);
  
      context.fillStyle = "#000";
      context.beginPath();
      context.arc(p2.x,p2.y,9,0,Math.PI*2,true);
      context.closePath();
      context.fill();         
      context.fillStyle = "#FFFFFF";
      context.fillText("2",p2.x-2, p2.y+2);
  
      context.fillStyle = "#000";
      context.beginPath();
      context.arc(p3.x,p3.y,9,0,Math.PI*2,true);
      context.closePath();
      context.fill();         
      context.fillStyle = "#FFFFFF";
      context.fillText("3",p3.x-2, p3.y+2);
  
      context.fillStyle = "#000";
      context.beginPath();
      context.arc(p4.x,p4.y,9,0,Math.PI*2,true);
      context.closePath();
      context.fill();         
      context.fillStyle = "#FFFFFF";
      context.fillText("4",p4.x-2, p4.y+2);
  
  
  }
  
  function drawScreen2() {
  
      //draw the points
  
      context.font ="13px sans";
  
      context.fillStyle = "#000";
      context.beginPath();
      context.arc(p9.x,p9.y,9,0,Math.PI*2,true);
      context.closePath();
      context.fill();         
      context.fillStyle = "#FFFFFF";
      context.fillText("9",p9.x-2,p9.y+2);
  
      context.fillStyle = "#000";
      context.beginPath();
      context.arc(p10.x,p10.y,9,0,Math.PI*2,true);
      context.closePath();
      context.fill();         
      context.fillStyle = "#FFFFFF";
      context.fillText("10",p10.x-2, p10.y+2);
  }
  
  var p1 = {x:668, y:220};
  var p2 = {x:610, y:370};
  var p3 = {x:565, y:490};
  var p4 = {x:696, y:220};
  var p5 = {x:750, y:370};
  var p6 = {x:800, y:490};
  var p7 = {x:635, y:415};
  var p8 = {x:725, y:415};
  
  var p9 = {x:635, y:415};
  var p10 = {x:725, y:415};
  
  
  theCanvas = document.getElementById('canvasOne');
  context = theCanvas.getContext('2d');
  
  setInterval(drawScreen, 513);   
  setInterval(drawScreen2, 765);
  }
  </code></pre>
  
  <p>in the above code i want to store drawscreen() and drawsscreen2() functions into an array and loop through to display points of each function seperately for an action..
  how do i do this
  can anyone help me with this?</p>
  
  <p>jsfiddle.net/karthikchandran/bn4kgov4 ..chk this demo when i click the next button the next function simply runs..i want all the functions i an loop and iterate one at a time when next button is clicked ..</p>