Make js canvas finish drawing within loop

Question

I have a loop like this using <canvas>:

for (i = 0; i < 1000; i++) { draw_something(); // clears canvas at start of function }

When this runs, nothing happens on the canvas until the loop finishes. The function draw_something is confirmed to work and displays something different each time.

Is there a way to make this draw to the canvas 1000 times? I don't want to use setInterval because I can't know how long draw_something will take.

show more code. Problem is in `draw_something` function, or in outer array function. — Andrew Evt, Apr 25 '16 at 15:32
As the goal seems to be to have an animation, use [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) — Denys Séguret, Apr 25 '16 at 15:33
I want to run a Buffon's noodle/needle simulation, and I want everything to be displayed. — heptagon, Apr 25 '16 at 15:33
As I said, `draw_something` works in other contexts. I'm just running this loop from the command line. — heptagon, Apr 25 '16 at 15:35

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

setTimeout(draw_something, 0) seems to work, as suggested in this thread.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 25 '16 at 15:42

heptagon

31
4

You really should read the link I gave you about requestAnimationFrame. – Denys Séguret Apr 27 '16 at 16:42

Make js canvas finish drawing within loop

1 Answers1