title: Saving html5 Canvas to a Tablet
body: <p>I'm current designing a slide annotation product in html5 that is supported for all tablets + browsers that support html5 canvas. I have it saving my annotations the canvas to a computer but not to the tablet itself.</p>
  
  <p>In all regards, the ideal situation would be to save the canvas annotation data as data in a mysql database, but I cannot use Ajax.</p>
  
  <p>So I'm stuck with saving the annotated image to a image on their local machine.</p>
  
  <p>Here is my code to do that (I'm using canvas2image)</p>
  
  <p>window.onload = function() {</p>
  
  <pre><code>    var bMouseIsDown = false;
  
      var oCanvas = document.getElementById("drop1");
      var oCtx = oCanvas.getContext("2d");
  
      var imgData = oCanvas.toDataURL();
  
      var iWidth = oCanvas.width;
      var iHeight = oCanvas.height;
  
  var img = new Image();
  
  img.src = "Lectures/&lt;?php echo $_REQUEST["ClassID"]; ?&gt;/&lt;?php echo $_REQUEST["CatID"]; ?&gt;/Slide&lt;?php echo $_REQUEST["Slide"]; ?&gt;.png";
  img.onload = function() {
      oCtx.drawImage(img, 0, 0)
  }
  
  
      oCanvas.onmousedown = function(e) {
          bMouseIsDown = true;
          iLastX = e.clientX - 130;
          iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
      }
      oCanvas.onmouseup = function() {
          bMouseIsDown = false;
          iLastX = -1;
          iLastY = -1;
      }
      oCanvas.onmousemove = function(e) {
          if (bMouseIsDown) {
              var iX = e.clientX-130;
              var iY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
              oCtx.moveTo(iLastX, iLastY);
              oCtx.lineTo(iX, iY);
              oCtx.stroke();
              iLastX = iX;
              iLastY = iY;
          }
      }
  
      function showDownloadText() {
          document.getElementById("buttoncontainer").style.display = "none";
          document.getElementById("textdownload").style.display = "block";
      }
  
      function hideDownloadText() {
          document.getElementById("buttoncontainer").style.display = "block";
          document.getElementById("textdownload").style.display = "none";
      }
  
      function convertCanvas(strType) {
          if (strType == "PNG")
              var oImg = Canvas2Image.saveAsPNG(oCanvas, true);
          if (strType == "BMP")
              var oImg = Canvas2Image.saveAsBMP(oCanvas, true);
          if (strType == "JPEG")
              var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);
  
          if (!oImg) {
              alert("Sorry, this browser is not capable of saving " + strType + " files!");
              return false;
          }
  
          oImg.id = "canvasimage";
  
          oImg.style.border = oCanvas.style.border;
          oCanvas.parentNode.replaceChild(oImg, oCanvas);
  
          showDownloadText();
      }
  
      function saveCanvas(pCanvas, strType) {
          var bRes = false;
          if (strType == "PNG")
              bRes = Canvas2Image.saveAsPNG(oCanvas);
          if (strType == "BMP")
              bRes = Canvas2Image.saveAsBMP(oCanvas);
          if (strType == "JPEG")
              bRes = Canvas2Image.saveAsJPEG(oCanvas);
  
          if (!bRes) {
              alert("Sorry, this browser is not capable of saving " + strType + " files!");
              return false;
          }
      }
  
      document.getElementById("savepngbtn").onclick = function() {
          saveCanvas(oCanvas, "PNG");
      }
      document.getElementById("savebmpbtn").onclick = function() {
          saveCanvas(oCanvas, "BMP");
      }
      document.getElementById("savejpegbtn").onclick = function() {
          saveCanvas(oCanvas, "JPEG");
      }
  
      document.getElementById("convertpngbtn").onclick = function() {
          convertCanvas("PNG");
      }
      document.getElementById("convertbmpbtn").onclick = function() {
          convertCanvas("BMP");
      }
      document.getElementById("convertjpegbtn").onclick = function() {
          convertCanvas("JPEG");
      }
  
      document.getElementById("resetbtn").onclick = function() {
          var oImg = document.getElementById("canvasimage");
          oImg.parentNode.replaceChild(oCanvas, oImg);
  
          hideDownloadText();
      }
  
  }
  </code></pre>