title: HTML canvas saving on mysql database
body: <p>I'm stuck with my code.</p>
  
  <p><strong>Problem</strong>: I have canvas and inside it I draw the lines. And after I finished I want that lines to stay in the right place where i left that(before reload website). So I need to send that canvas to mysql data base. But here I stuck. Did I first need to create .png image and then try to send that image information to database? or somehow I can send it right off from code to database by using AJAX?  I read a lot of information and I am confused right now.</p>
  
  <p>If I will use method <code>HTMLgetImageData()</code> and <code>HTMLputImageData()</code> then I need to create some real image in my server? or I can take straight from the canvas? and send to mysql databse? :) </p>
  
  <p><strong>so now I have Canvas in html and some script for drawing the lines:</strong> </p>
  
  <pre><code>$(".widget_body").on("mousedown", "canvas", function() {
  
      var id = $(this).attr("id");
      var canvas = document.getElementById(id);
      var canvas,
          context,
          dragging = false,
          dragStartLocation,
          snapshot;
  
      fitToContainer(canvas);
  
      function fitToContainer(canvas){
        // Make it visually fill the positioned parent
        canvas.style.width ='100%';
        canvas.style.height='100%';
        // ...then set the internal size to match
        canvas.width  = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
      }
  
  
      function getCanvasCoordinates(event) {
          var x = event.clientX - canvas.getBoundingClientRect().left,
              y = event.clientY - canvas.getBoundingClientRect().top;
  
          return {x: x, y: y};
      }
  
      function takeSnapshot() {
          snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
      }
  
      function restoreSnapshot() {
          context.putImageData(snapshot, 0, 0);
      }
  
  
      function drawLine(position) {
          context.beginPath();
          context.moveTo(dragStartLocation.x, dragStartLocation.y);
          context.lineTo(position.x, position.y);
          context.stroke();
      }
  
      function dragStart(event) {
          dragging = true;
          dragStartLocation = getCanvasCoordinates(event);
          takeSnapshot();
      }
  
      function drag(event) {
          var position;
          if (dragging === true) {
              restoreSnapshot();
              position = getCanvasCoordinates(event);
              drawLine(position);
          }
      }
  
      function dragStop(event) {
          dragging = false;
          restoreSnapshot();
          var position = getCanvasCoordinates(event);
          drawLine(position);
      }
  
      function clearCanvas(event) {
          context.clearRect(0, 0, canvas.width, canvas.height);
      }
  
  
      context = canvas.getContext('2d');
      context.strokeStyle = 'purple';
      context.lineWidth = 4;
      context.lineCap = 'round';
  
      canvas.addEventListener('mousedown', dragStart, false);
      canvas.addEventListener('mousemove', drag, false);
      canvas.addEventListener('mouseup', dragStop, false);
      canvas.addEventListener('dblclick', clearCanvas, false);
      });
  </code></pre>
  
  <p>Maybe somebody can suggest something to me? Maybe something about next steps?What should I have to do from this moment?</p>