title: Saving html5 Canvas as Data to mysql Database
body: <p>This might not be possible, it would just be really Ideal for my situation. I'm using an html5 canvas as a slide presenter which the user can draw on and save onto their local machine.</p>
  
  <p>My goal is to instead save this to our database in a some what different way.</p>
  
  <p>What I want to happen:</p>
  
  <p>The canvas loads up the slide and the user then can draw on it. Once they hit save, it saves the data of the lines to a cell in our database. When the user logs back into to see the slide it displays the original slide with the annotations then pulled on top of it.</p>
  
  <p>Using this method I will not have to store thousands of Images for each unique person and they will have the ability to erase past annotations without erasing the original slide.</p>
  
  <p>Here is my code for uploading:</p>
  
  <p>Canvas:</p>
  
  <pre><code>&lt;input type="button" id="savepngbtn" value="Save Slide"&gt;
  
  &lt;!-- Main Canvas / Main Slide --&gt;
   &lt;div id="main"&gt;&lt;canvas id="drop1" class="drop" style=" background-repeat:no-repeat;" width="680" height="510"&gt;&lt;/canvas&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Pulling Original Image:</p>
  
  <pre><code>var img = new Image();
  img.src = 'pdf_images/pdf-save-0.png';
  img.onload = function() {
      oCtx.drawImage(img, 0, 0)
  }
  </code></pre>
  
  <p>What I need:</p>
  
  <ul>
  <li>The save feature/function to save the lines created as data to the database</li>
  <li>The code to upload data and display it on the canvas as it was created before.</li>
  </ul>
  
  <p>I'm not sure if any of this is possible but man it would be really nice and a life saver! Thanks!</p>