title: Is it faster to draw a series images on a Canvas with WebAssembly?
body: <p>I want to ask if it's faster and more memory efficient to draw a series of images into a canvas using WebAssembly/WASM? </p>
  
  <p>I'm asking this since I have tested to draw series of images (animation) both in the main UI and with web workers. For few canvases (<em>1-5 canvases</em>) the performance is bearable, however for more canvases (<em>like 20-25</em>) the scenario gets a little different, rendering becomes slow motion. </p>
  
  <p><strong>Here's the code in main UI:</strong></p>
  
  <pre><code>const videoDecoder = new Worker("videoDecoder.js");
  const canvas = document.querySelector("#canvas");
  const offscreen = canvas.transferControlToOffscreen();
  videoDecoder.postMessage({ action: 'init', canvas: offscreen }, [offscreen] );
  </code></pre>
  
  <p><strong>Here's my web worker:</strong></p>
  
  <pre><code>onmessage = async function (e) {
      const blob = e.data;
      blob.arrayBuffer().then(arrayBuffer =&gt; {
          const uint8Array = new Uint8Array(arrayBuffer);
          for(;;;) {
             const offsetIdx = ...;
             const endIdx = ...;
             const jpegArray = uint8Array.slice(offsetIdx, endIdx);
             const blob = new Blob([jpegArray], {type: "image/jpeg"});
             drawImage(blob);
          }
      }
  }
  
  async function drawImage(blob) {
      const bmp = await createImageBitmap(blob);
      context.drawImage(bmp, 0, 0);
      bmp.close();
  }
  </code></pre>
  
  <p>This works fine it can render the images to the browser from web worker, but as mentioned, at 1-5 canvases it is still smooth, but with more canvases the rendering in the browser gets very slow. </p>
  
  <p>So I want to ask <strong>is it faster to draw a series images on a Canvas with WebAssembly</strong>? Or there will be no theoretical performance gain compared to doing it now with the  web worker approach? </p>