title: JS canvas getContext then transferControlToOffscreen
body: <p>Working code:</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  var offscreen = canvas.transferControlToOffscreen();
  </code></pre>
  
  <p>When using <code>.getContext()</code>:</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var offscreen = canvas.transferControlToOffscreen();
  // InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
  </code></pre>
  
  <p>Further attempts do not work either:</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  delete ctx;
  var offscreen = canvas.transferControlToOffscreen();
  </code></pre>
  
  <p>Or even so:</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  ctx.reset();
  delete ctx;
  var offscreen = canvas.transferControlToOffscreen();
  </code></pre>
  
  <p>Nothing changes with <code>webgl</code> instead of <code>2d</code></p>
  
  <p>So, how can i get the offscreen of a canvas which has something drawn on it, and then send it to a worker? Or must i use something like <code>getImageData()</code> and send the result alongside the offscreen of a brand new canvas, and let the worker copy with <code>putImageData()</code>? I do not want to make these additional operations (because will run slower).</p>
  
  <p>Another way would have been to use <code>cloneNode()</code>, but the canvas image does not get copied.</p>
  
  <p>Ive looked trough all methods of canvas and of context, but nothing seems to fix the problem.</p>
  
  <p>I am using FF 67 with offscreen enabled. I suppose there is no difference in Chrome.</p>