Show loading animation while Canvas generates

rdyar

I have a polka dot generator that can be large and slow to generate - 3000x3000 pixels at its highest res, lots of dots over lapping, sometimes it takes 3 or 4 seconds to appear.

While it is generating I would like to show a simple spinner, like http://spin.js.org/

But no matter what I do, nothing happens until after the canvas is generated.

I gave up on the spinner for testing, and am just changing an html element to show the current time.

I am NOT using the P5 Draw function.

In my drawDots function, the first couple lines are:

var test = document.getElementById('test'); var date = Date.now(); test.innerHTML = "My new text!" + date; // lots of code below here to make the pattern

but the pattern fills the canvas at the same time the date appears, even if it takes several seconds. I would think something super simple like that would happen instantly, then the canvas would take its normal time to generate and would appear later.

I also tried making them 2 functions:

function dots() { progress(); // runs the bit above to show the date in the html drawDots(); // generates the pattern } either way the same thing happens, the pattern and the date show up at the same time.

Is there something about the canvas element that blocks anything else from happening? is there another way to show a loading animation/message while the canvas updates? the pattern is changed based on slider inputs.

Work in progress - they are all snappy except the large size ones with very busy patterns: https://rdyar.gitlab.io/background-generator/

GoToLoop

https://developer.Mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

rdyar

thanks, I looked at that, but it was a little too much for me at this point. There was a comment in there though that made it more clear to me what the problem is, single threaded js can't update the DOM while it is doing something. I assume that means that it could run my little thing to show the date instantly, but couldn't update the DOM until the canvas was ready. That is much more clear to me now.

Googling some more I found posts saying to do a setTimeout on the heavy part and after a while I got it to work:

function drawDots(){ if (canvasSize.value !== 'small'){ //checking to see if it is small - skip progress if so progress(); //runs progress animation setTimeout(generator, 10); //wait 10mils then run generator function } else {generator();} //if it is small then generate without progress animation }