title: Fastest way to capture image from a HTML Canvas
body: <p>Here's my code to capture an image from a Canvas playing video:</p>
  
  <pre><code>    let drawImage = function(time) {
          prevCtx.drawImage(videoPlayer, 0, 0, w, h);
          requestAnimationFrame(drawImage);
      }
      requestAnimationFrame(drawImage);
  
      let currIndex = 0;
      setInterval(function () {
          if(currIndex === 30) {
              currIndex = 0;
              console.log("Finishing video...");
              videoWorker.postMessage({action : "finish"});
          } else {
              console.log("Adding frame...");
              // w/o this `toDataURL` this loop runs at 30 cycle / second
              // so that means, this is the hot-spot and needs optimization:
              const base64img = preview.toDataURL(mimeType, 0.9);
              videoWorker.postMessage({ action: "addFrame", data: base64img});
              currIndex++;
          }
      }, 1000 / 30)
  </code></pre>
  
  <p>The goal is at each 30 frames (which should be at 1 second) it would trigger to <em>transcode</em> the frames added. </p>
  
  <p>The problem here is that the <code>preview.toDataURL(mimeType, 0.9);</code> adds at least 1 second, without it the log shows the <code>currIndex === 30</code> gets triggered every second. What would be the best approach to be able to capture at least about 30 FPS image. <strong>What is the fastest way to capture image from a HTML Canvas</strong> that it will not be the bottleneck of real-time video transcoding process?</p>