Q:

Wanting html/js canvas to update everytime it goes through my loop

I'm newer to js coding and I can't find any answers to my question. I'm working with the  tag in html and trying to get my JS code to redraw the canvas when I want. I've tried using a simple while loop to do it, but that just goes through the while loop then draws the end result without showing the updates in between. My current code (below is using the setTimeout/clearTimeout calls, but it produces the same result. Not sure if this is even possible. Maybe it's just how I'm updating my canvas?
This is my code for calling my function to update my arrays I'm storing my data in and then update the canvas.
var done = false;
var count = 0;
while (!done) {
    timer = setTimeout(updateGrid(grid), 500);
    clearTimeout(timer);
    done = stop(count, allDone);
    count++;
}

The functions I'm using to draw on the canvas:
context = canvas.getContext("2d");
context.fillStyle = color;
context.fillRect(x, y, w, h);

Is there something I'm missing?

A:

clearTimeout is nullifying your updateGrid timeout.
I think what you want is to use setInterval instead. But you can also use setTimeout and adjust the timeout time (500 * (i + 1) or something) and set up all your timeouts like that
while (!done) {
    timer = setTimeout(updateGrid(grid), 500);
    clearTimeout(timer); //this is nullifying the line above
    done = stop(count, allDone);
    count++;
}

