title: html5 canvas drawing / saving
body: <p>I'm attempting to turn the html5 canvas into a slide annotator. My goal is to upload an Image of a slide, allow the user to draw on it, and then save it. </p>
  
  <p>Whats working: I successfully have slides being uploaded as background images and allowing the user to draw on them. I also have the save function working.</p>
  
  <p>Whats wrong: Once the image is save, the drawing the user made stays but the background image doesn't become part of the saved image.</p>
  
  <p>Is there a way to save the canvas to an image and keep the slide background in it? Perhaps its not supposed to be a background image?</p>
  
  <p>Here is some of my code:</p>
  
  <p>The Canvas + button:</p>
  
  <pre><code>&lt;div id="main"&gt;
  &lt;canvas id="drop1" class="drop" style="  background: url(pdf_images/pdf-save-0.png); background-repeat:no-repeat;"&gt;
  &lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;input type="button" id="savepngbtn" value="Save Slide"&gt;
  </code></pre>
  
  <p>Saving the Canvas:</p>
  
  <pre><code>document.getElementById("savepngbtn").onclick = function() {
          saveCanvas(oCanvas, "PNG");
      }
  
  function saveCanvas(pCanvas, strType) {
          var bRes = false;
          if (strType == "PNG")
              bRes = Canvas2Image.saveAsPNG(oCanvas);
          if (!bRes) {
              alert("Sorry, this browser is not capable of saving " + strType + " files!");
              return false;
          }
      }
  </code></pre>