title: Problem terminating several Web Workers using offscreen canvas
body: <p>I'm a beginner using web workers and I'm dealing with a little problem.</p>
  <p>I'm creating several workers to process audio buffers and draw its waveform on a offscreen canvas:</p>
  <p><em>main thread:</em></p>
  <pre class="lang-js prettyprint-override"><code>// foreach file
   let worker = new Worker('js/worker.js');
   let offscreenCanvas = canvas.transferControlToOffscreen();
   
   worker.addEventListener('message', e =&gt; {
      if (e.data == &quot;finish&quot;) {
             worker.terminate();
          }
      });
  
   worker.postMessage({canvas: offscreenCanvas, pcm: pcm}, [offscreenCanvas]);
  // end foreach
  </code></pre>
  <p><em>worker:</em></p>
  <pre class="lang-js prettyprint-override"><code>importScripts('waveform.js');
  
  self.addEventListener('message', e =&gt; {
      let canvas = e.data.canvas;
      let pcm = e.data.pcm;
      
      displayBuffer(canvas, pcm); // 2d draw function over canvas
      self.postMessage('finish');
  });
  </code></pre>
  <p>The result is strange. The thread is terminate immediately at <strong>displayBuffer()</strong> finish, but as you can see in the profiling, the GPU is still rendering the canvas, which sometimes causes that render crash. No error, only black canvas.</p>
  <p><a href="https://i.stack.imgur.com/4L4EY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4L4EY.png" alt="enter image description here" /></a></p>
  <p>I'm running over Chrome 83.0</p>