meteor-signature-pad

Meteor wrapper for https://github.com/szimek/signature_pad

Installation

meteor add cunneen:signature-pad

Usage

HTML

1<template name="sigpad">
2  <div id="signature-pad" class="m-signature-pad">
3    <div class="m-signature-pad--body">
4      <canvas></canvas>
5    </div>
6    <div class="m-signature-pad--footer">
7      <div class="description">Sign above</div>
8      <button class="button clear" data-action="clear">Clear</button>
9      <button class="button save" data-action="save">Save</button>
10    </div>
11  </div>
12</template>

JavaScript

1var wrapper,
2    clearButton ,
3    saveButton,
4    canvas,
5    signaturePad;
6
7Template.sigpad.rendered = function() {
8  wrapper = document.getElementById("signature-pad");
9  canvas = wrapper.querySelector("canvas");
10
11  // Adjust canvas coordinate space taking into account pixel ratio,
12  // to make it look crisp on mobile devices.
13  // This also causes canvas to be cleared.
14  function resizeCanvas() {
15      // When zoomed out to less than 100%, for some very strange reason,
16      // some browsers report devicePixelRatio as less than 1
17      // and only part of the canvas is cleared then.
18      var ratio =  Math.max(window.devicePixelRatio || 1, 1);
19      canvas.width = canvas.offsetWidth * ratio;
20      canvas.height = canvas.offsetHeight * ratio;
21      canvas.getContext("2d").scale(ratio, ratio);
22  }
23  
24  window.onresize = resizeCanvas;
25  resizeCanvas();
26  
27  signaturePad = new SignaturePad(canvas);
28};
29
30Template.sigpad.events({
31  "click [data-action=clear]": function() {
32    signaturePad.clear();
33  },
34  "click [data-action=save]": function() {
35    if (signaturePad.isEmpty()) {
36        alert("Please provide signature first.");
37    } else {
38        window.open(signaturePad.toDataURL());
39    }
40  },
41});