title: Drawing to p5.Image instead of to canvas
body: <p>Given a loaded png image as a template, I want to enable a user to trace elements of the image. In p5, this is easy:</p>
  
   
  
  <pre class="lang-javascript prettyprint-override"><code>setup() {
      // Load image
      var img = loadImage('...');
      image(img, 0, 0);
  }
  
  draw() {
      ellipse(mouseX, mouseY, 2, 2);
  }
  </code></pre>
  
  <p>However, I want to then be able to save <em>only</em> the ellipses (without the underlying image). Is there a way to write to an <code>Image</code> instead of directly down to the canvas, so that I can lift the pixels of the trace without taking the original image with it?</p>
  
  <p>My current plans are one of:</p>
  
  <ul>
  <li>Overlay a second p5 instance, and draw on a transparent canvas overlaid on the image... But this seems harder to maintain, and may suffer from the DOM being out of perfect alignment</li>
  <li>Instead of using <code>ellipse</code>, write to a <code>createImage</code>-generated pixel array... But this seems slow and unpleasant.</li>
  </ul>
  
  <p>Caveat: The image is a <code>p5.Image</code>, so overlaying on top of a <code>&lt;img&gt;</code> won't be enough.</p>