Question

I am writing text to a canvas 3 times in three different places using a function, Currently the function is parameter-less, but it uses a global variable that is changed between the function calls to indicate the count, which is used to determine the text that is output. It could take a parameter and be used in a loop with a local rather than global variable.

After these three text strings are output to the canvas Which I want to show sequentially…

I then call another function which clears the canvas and shows the end result.

I want all of these to happen sequentially with time between them.

I have tried the setTimeout() and setInterval() and have also tried the pausecomp(ms) function suggested by one responder. NONE have given me the results I desire.

here is the sample of what I am doing…

c=document.getElementById("canvas");
ctx=c.getContext("2d");

function whap(opt)
{
    var comp=Math.floor(Math.random()*3)+1; // determines computer choice
    ctx.fillStyle="#92B9CC";
    ctx.fillRect(0,0, c.width, c.height);

    num = 1;
    goCount();
    sleep(500);
    num = 2;
    goCount();
    sleep(500);
    num = 3;
    goCount();
    sleep(500);

    drawChoice(choice, comp);
}

function goCount()
{
    ctx.fillStyle="#340CF7";
    if(num == 1)
    {
        ctx.fillText("One...", 50, 100);
    }
    else if(num == 2)
    {
        ctx.fillText("Two...", 100, 150);
    }
    else if(num == 3)
    {
        ctx.fillText("Three...", 150, 200);
    }
    else
    {
        ctx.fillText("Go!!", 200, 250);
    }
}

function drawChoice(n, x)
{
    /* this function redraws the canvas the based on the two parameters,
determines whether the player won or lost and fills the canvas 
with the results... drawing the appropriate images onto the canvas 
then filling the canvas with the appropriate text.
    */
}

Answer 1

Generally you cannot have blocking calls in js (there are only a few exceptions, but these are not recommended because it will block entire UI). So either you need to work with a deferred objects or you need to use callbacks like this:

function sleep(next) {
    window.setTimeout(next, 500);
}

num=1;
goCount();

sleep(function() {
   num = 2; 
   goCount();

   sleep(function() {
       num = 3;
       goCount();

       sleep(function() {
           drawChoice(choice, comp);
       });
   });
});