Question

Goal: I am trying to create a slightly dynamic page animated with basic canvas animations using setInterval(). 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.

Problem: The canvas transition and the text appear at the same time.

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.

I was working with it on jsfiddle, but the website is not cooperating at the moment. So here is what I have right now:

<div id="container">
    <a href="#" id="LftButton"><img src="imageFiles/arrowButtonLft.png" /></a>
    <a href="#" id="RtButton"><img src="imageFiles/arrowButtonRt.png" /></a>
    <div id="canvasWrapper">
        <canvas id="myCanvas" width="675" height="600">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
        <script src="aboutMeScript.js" type="text/javascript"></script>
    </div>
</div>

#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();

Thoughts?

Answer 1

You have two problems.
1. as another commentor has mentioned, your setTimeout call was incorrect
2. Even if you correct the setTimeout call, the fadeCanvas() interval will immediately overwrite whatever text you display.

In my opinion, the best approach is to test for 100% opacity within fadeCanvas(), and once that goal is reached, clear the interval and call display411() directly.

function fadeCanvas(){
    ctx.fillStyle = "rgba(0,0,0," + alphaCounter + ")";
    ctx.fillRect(0,0,675,600);
    alphaCounter += .03;
    if (alphaCounter >= 1) {
        clearInterval(fadeToBlack);
        display411();
    }
}

function init(){
    fadeToBlack = setInterval(fadeCanvas,100);
    ctx.save();
    //setTimeout(display411(), 5000) 
}