javascript - How to "view" the canvas being drawn on live -

i've not experimented canvases before. i've made project involves canvas gets continually extended, new rows of "data" being appended bottom of it.

i've got actual rendering part working fine; final output want be... intention project able watch gets drawn on screen. however, instead happens canvas hangs few seconds, , displays @ once. happens in chrome @ least, i've not tested other browsers.

i'm using loop following:

for(var = 0; < 500; i++){     addrow(data, canvas); } 

and want view each row it's being drawn.

any ideas how this?

since javascript single-threaded, canvas cannot redrawn while loop running.

you have create idle moments in between calls addrow, javascript thread freed act on new data. making calls addrow asynchronous; easiest way (ab)use standard function settimeout¹.

settimeout takes function , executes function asynchronously, after given delay (if omit delay parameter, delay of 0ms assumed). called abusing function earlier because don't use delay functionality, think standard way execute code asynchronously; if not please let me know.

you can pass anonymous function (rather named one) settimeout, so:

for(var = 0; < 500; i++){     settimeout(function() {         data = calculatenextrow(data)         addrow(data, canvas);     }); } 

if need use i inside anonymous function, there scope issues complicated explain here, this answer excellent job of deeper causes of issues alluded , examples 3 , 5 illustrate these issues.

^{1: in earlier comment suggested setinterval mistake; setinterval calls passed function repeatedly redundant since calling loop. otherwise settimeout , setinterval similar.}