title: How to convert canvas.toblob() callback to an Observable
body: <p>I want to create a function that return an observable of file</p>
  
  <p>My current working code uses a promise</p>
  
  <pre class="lang-js prettyprint-override"><code>testPromise(): Promise&lt;File&gt; {
  
    return new Promise((resolve, reject) =&gt; {
  
      const canvas = document.createElement('canvas');
      canvas.width = 800;
      canvas.height = 600;
  
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0, 800, 600);
  
      canvas.toBlob((blob: Blob) =&gt; resolve(new File([blob], name)), type, quality);
    });
  }
  </code></pre>
  
  
  
  <p>Instead of that, I want to return <code>Observable&lt;File&gt;</code></p>
  
  <p>I tried the following but I cannot pass the <code>toBlob()</code> arguments such as <code>type</code> and <code>quality</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>testObservable(): Observable&lt;File&gt; {
  
    const canvas = document.createElement('canvas');
    canvas.width = 800;
    canvas.height = 600;
  
    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, 800, 600);
  
    const toBlob = bindCallback(canvas.toBlob);
  
    return toBlob().pipe(
      map((blob: Blob) =&gt; {
        return new File([blob], name)
      })
    );
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Expected behavior</strong></p>
  
  <pre><code>const toBlob = bindCallback(canvas.toBlob);
  toBlob(type, quality) // &lt;= Expected 0 arguments, but got 2.
  </code></pre>
  
  <p>Here I get an error on <strong>toBlob</strong> <code>Expected 0 arguments, but got 2.</code></p>
  
  <p><strong>Current behavior</strong></p>
  
  <pre><code>const toBlob = bindCallback(canvas.toBlob);
  toBlob() // &lt;= No type or quality arguments
  </code></pre>
  
  <p>Here is the canvas.toBlob interface according to <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob" rel="nofollow noreferrer">MDN docs</a></p>
  
  <blockquote>
    <p>void canvas.toBlob(callback, mimeType, qualityArgument);</p>
  </blockquote>
  
  <p><strong><em>PS</strong>: I don't want to convert the Promise to an Observable,but I need to convert the callback directly to an Observable</em></p>
  
  <p>Any ideas?</p>