title: Save HTML5 canvas contents, including dragged-upon images
body: <p>I'm using a canvas to load a background image, and then, using jQuery UI, I call the droppable() function on the canvas and draggable() on a bunch of PNG images on the screen (that are not in the canvas). After the user drags one or more images on the canvas, I allow him to save the contents to a file using the following function:</p>
  
  <pre><code>function saveCanvas() {
      var data = canvas.toDataURL("image/png");
      if (!window.open(data)) {
          document.location.href = data;
      }
  }
  </code></pre>
  
  <p>This successfully open another window with an image, that sadly contains only the original background image, not the dragged images. I'd like to save an image presenting the final stage of the canvas. What am I missing here?</p>
  
  <p>Thanks for your time.</p>