title: Dom doesn't update right away when using convertToBlob on an Offscreen canvas
body: <p>I have an application that needs to generate a couple thousand images. The way that I'm doing that is with a set of preloaded pngs (acting as transparent layers) and an offscreen canvas. I draw the images onto the canvas, convert it to a blob, and then write the image to a div using a custom class called Images.</p>
  <p>I want to show a loading bar and clear old images, first, but there is a 3-5 second delay before the dom updates even though the &quot;empty()&quot; and &quot;show()&quot; code is at the beginning of the click request.</p>
  <p>Is there something I'm doing wrong with regard to the asynchrony or promises that is causing the dom to not update immediately?</p>
  <p>Here's some of the code:</p>
  <pre><code>// Generate Images
  $(&quot;#generate_images&quot;).click(function(){
      // Show loading bar
      $(&quot;#progress_bar .progress-bar&quot;).css(&quot;width&quot;, &quot;0%&quot;);
      $(&quot;#progress_bar&quot;).show(0);
  
      // Show loading spinner
      $(&quot;#loading&quot;).show(0);
      $(&quot;#images&quot;).empty();
  
      console.log(&quot;Generating Images&quot;);
  
      $.each(images, function(id, image){
          // Sort traits (png layers)
          var traits = Object.values(image.traits).sort((a, b) =&gt; {
              return a.z_index - b.z_index;
          });
          images[id].layers = [];
          $.each(traits, function(trait_idx, trait){
              images[id].layers.push(preloaded_images[trait.variant_id])
          });
      });
  
      // Create canvas
      var canvas = new OffscreenCanvas(1200, 1200);
      var context = canvas.getContext(&quot;2d&quot;);
  
      console.log(&quot;Generating canvases.&quot;);
      $.each(images, function(id, image){
          // Clear the canvas
          context.clearRect(0, 0, canvas.width, canvas.height);
  
          // Draw each image layer
          $.each(images.layers, function(src, layer){
              context.drawImage(layer, 0, 0);
          });
  
          // Add imageData to screen
          canvas.convertToBlob().then(function(blob) {
              // Do something with the blob like render to the screen
          });
      });
  });
  </code></pre>
  <p>Any thoughts on making this more efficient would also be appreciated.</p>