title: Call Javascript functions in succession
body: <p><strong>Goal:</strong> I am trying to create a slightly dynamic page animated with basic canvas animations using <code>setInterval()</code>. When the user first goes to the page, a background image displays. Then a canvas appears over it and gradually the opacity increases to completely opaque black. After the canvas is black, I want white text to appear over my black canvas.</p>
  
  <p><strong>Problem:</strong> The canvas transition and the text appear at the same time.</p>
  
  <p>I have researched this issue, and there appears to be a panoply of solutions here. I have already tried many variations in my own code. Once I had two separate functions. Another time I tried calling a function which then called both functions in succession. I read a blog about creating an array of functions, and then looping through the functions. That idea is intriguing, but I am wondering if there is something much more simple here that will suffice.</p>
  
  <p>I was working with it on jsfiddle, but the website is not cooperating at the moment. So here is what I have right now:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;a href="#" id="LftButton"&gt;&lt;img src="imageFiles/arrowButtonLft.png" /&gt;&lt;/a&gt;
      &lt;a href="#" id="RtButton"&gt;&lt;img src="imageFiles/arrowButtonRt.png" /&gt;&lt;/a&gt;
      &lt;div id="canvasWrapper"&gt;
          &lt;canvas id="myCanvas" width="675" height="600"&gt;
              &lt;p&gt;Your browser doesn't support canvas.&lt;/p&gt;
          &lt;/canvas&gt;
          &lt;script src="aboutMeScript.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  #myCanvas{
  width:675px;
  height:600px;
  float:left;
  }
  #canvasWrapper{
  width:675px;
  height:600px;
  margin:auto;
  }
  #RtButton{
      float:right;
  margin-right:34px;
  }
  #LftButton{
      float:left;
  margin-left:34px;
  }
  #RtButton, #LftButton{
  margin-top:200px;
  }
  
  var drawing = document.getElementById("myCanvas");
  //Initialize drawing context
  var ctx = drawing.getContext("2d");
  //Canvas commands follow
  var alphaCounter = .033;
  
  function fadeCanvas(){
  ctx.fillStyle = "rgba(0,0,0," + alphaCounter + ")";
  ctx.fillRect(0,0,675,600);
  alphaCounter += .03;
  }
  function display411(){
  ctx.fillStyle=('#fff');
  ctx.font='bold 14px + "Courier New, Courier, monospace" +';
  ctx.fillText('Click the arrow keys forward to reveal the bigger picture.', 100,100);
  }
  function init(){
  setInterval(fadeCanvas,100);
  ctx.save();
  setTimeout(display411(), 5000)
  }
  window.onload = init();
  </code></pre>
  
  <p>Thoughts?</p>