Loading animation while javascript is processing

Hi everyone, I've recently run into a problem that I'm not sure how to solve, or if it even is solvable.

Here's what I'm trying to do. I have a site (locally) that takes a dropped file as input (Using dropzone.js), uploads that file to the server, does some processing on it in php and returns a JSON object back to the page. This all works fine. Once the page has the JSON data, it uses it to draw an image on a canvas. That part works fine as well.

This is where I'm running into problems. The drawing process takes a few seconds, so I have another canvas with an animation loop, and I want to run that animation loop over the top of everything while the main drawing process is doing it's thing, but javascript is single threaded, and no matter what I try, I cannot get the animation to start and play while the main drawing function is running. What happens is that the drawing area goes black (The background color used in the loading animation), everything freezes for 3 or 4 seconds, then when the main drawing function is finished, the animation runs for a few frames as it fades out and the main drawing is shown.

My first thought was to just render the animation as a GIF, stick it in a div and just show that instead of using the canvas animation, but even that doesn't run properly. The GIF shows, pauses for 4 seconds while the drawing function runs, then the GIF runs for a few frames as it fades out.

Other things I have explored:

1. I have looked into webworkers, which do not suit this purpose since webworkers cannot interact with the DOM and both functions draw to a canvas or otherwise affect the DOM.
2. Building a separate page that just shows the canvas animation, then loading that in an iframe. This does exactly the same thing as if the animation was in the same page.
3. Put the GIF in the iframe. This does exactly as above.

Is there anything I can do to make this loading animation work properly? I can always just use a static "loading" overlay, but I really like the animation, and I would REALLY like to use it, and it seems stupid that this doesn't work.

UPDATE: Thanks for the suggestions and help everyone. Seems like browser javascript simply isn't capable of running multiple functions concurrently in a non-blocking way in the browser. I'm sure some of the js game engines have built their own concurrency functionality to allow this sort of thing, but for the purposes of the page I'm building, that would simply be overkill. I'm just going to use a static overlay div at this point.