title: how to add a background image to signature pad
body: <p>How do I export together with the background image together?</p>
  
  <p>Demo :<a href="http://59.127.247.144/AmhsGlassrecord/" rel="nofollow">http://59.127.247.144/AmhsGlassrecord/</a></p>
  
  <p>I want to get results :
  <a href="http://i.stack.imgur.com/dgaTp.jpg" rel="nofollow">enter image description here</a></p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var wrapper = document.getElementById("signature-pad"),
      clearButton = wrapper.querySelector("[data-action=clear]"),
      saveButton = wrapper.querySelector("[data-action=save]"),
      canvas = wrapper.querySelector("canvas"),
      signaturePad;
  
  function resizeCanvas() {
      var ratio = Math.max(window.devicePixelRatio || 1, 1);
      canvas.width = canvas.offsetWidth * ratio;
      canvas.height = canvas.offsetHeight * ratio;
      canvas.getContext("2d").scale(ratio, ratio);
  }
  
  window.onresize = resizeCanvas;
  resizeCanvas();
  
  signaturePad = new SignaturePad(canvas);
  var signaturePad = new SignaturePad(canvas);
  signaturePad.minWidth = 1;
  signaturePad.maxWidth = 1;
  signaturePad.penColor = "rgb(66, 133, 244)";
  
  clearButton.addEventListener("click", function (event) {
      signaturePad.clear();
  });
  
  saveButton.addEventListener("click", function (event) {
      if (signaturePad.isEmpty()) {
          alert("Please do not blank.");
      } else {
          //document.getElementById("hfSign").value = signaturePad.toDataURL();
          window.open(signaturePad.toDataURL());
      }
  });
  </code></pre>