title: What's "this" inside a promise creation?
body: <p>There's a github package called <a href="https://github.com/aloisdeniel/node-pngjs-draw" rel="nofollow noreferrer">pngjs-draw</a> that draws primitives onto a png.  Just what I need, but I'd like it to run alongside other async code that uses promises.  I'm attempting to do that, running into something I don't understand about "this".  The pngjs-draw example code from github looks like this...</p>
  
  <pre><code>var fs = require('fs');
  var drawing = require('pngjs-draw');
  var png = drawing(require('pngjs').PNG);
  
  fs.createReadStream("blue.png")
    .pipe(new png({ filterType: 4 }))
    .on('parsed', function() {
      // Draws a pixel with transparent green
      this.drawPixel(150,200, this.colors.black())
      // more examples snipped
      // Writes file
      this.pack().pipe(fs.createWriteStream('blue.out.png'));
    });
  </code></pre>
  
  <p>It uses "this" inside the 'parsed' function, and <code>this</code> seems to be an instance of something that has all of the drawing methods.</p>
  
  <p>I'd like to make a more generic version, except return a promise, handle errors, and so on.  But it seems I can't use "this" in the same way when creating the promise.  Here's my attempt...</p>
  
  <pre><code>function drawOnPNG(fileIn, fileOut, drawFunction) {
    return new Promise((resolve, reject) =&gt; {
        fs.createReadStream(fileIn).pipe(new png({ filterType: 4 })).on('parsed', () =&gt; {
            drawFunction(this);  // &lt;--MY PROBLEM, I THINK
            this.pack().pipe(fs.createWriteStream(fileOut)).on('finish', () =&gt; resolve()).on('error', error =&gt; reject(error));
        }).on('error', error =&gt; reject(error));        
    });
  }
  </code></pre>
  
  <p>I thought it would be handy to make drawing functions like this...</p>
  
  <pre><code>function someDrawFunction(pngThing) {
      pngThing.drawPixel(150,200, this.colors.black());
  }
  </code></pre>
  
  <p>Then I could draw like this...</p>
  
  <pre><code>drawOnPNG('fileIn.png', 'fileOut.png', someDrawFunction).then(...
  </code></pre>
  
  <p>But, when this executes, pngThing isn't what I hoped.  Inspecting it with the debugger, it's a very big object with seemingly all the JS classes defined on it.  Can you suggest a way to access the drawing object inside the promise creation?</p>