quiz init commit

public/js/signature.js

@@ -0,0 +1,48 @@
+var canvas = document.getElementById('signature-pad');
+
+// Adjust canvas coordinate space taking into account pixel ratio,
+// to make it look crisp on mobile devices.
+// This also causes canvas to be cleared.
+
+function resizeCanvas() {
+  // When zoomed out to less than 100%, for some very strange reason,
+  // some browsers report devicePixelRatio as less than 1
+  // and only part of the canvas is cleared then.
+  var ratio = Math.max(window.devicePixelRatio || 1, 1);
+  canvas.width = canvas.offsetWidth * ratio;
+  canvas.height = canvas.offsetHeight * ratio;
+  canvas.getContext('2d').scale(ratio, ratio);
+}
+
+if (canvas) {
+  window.onresize = resizeCanvas;
+  resizeCanvas();
+}
+
+var signaturePad = new SignaturePad(canvas, {
+  backgroundColor: 'rgb(255, 255, 255)', // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
+});
+
+document.getElementById('save-png').addEventListener('click', function () {
+  if (signaturePad.isEmpty()) {
+    return alert('Please provide a signature first.');
+  }
+
+  var data = signaturePad.toDataURL('image/png');
+  console.log(data);
+});
+
+document.getElementById('clear').addEventListener('click', function () {
+  signaturePad.clear();
+});
+
+document.getElementById('draw').addEventListener('click', function () {
+  var ctx = canvas.getContext('2d');
+  console.log(ctx.globalCompositeOperation);
+  ctx.globalCompositeOperation = 'source-over'; // default value
+});
+
+document.getElementById('erase').addEventListener('click', function () {
+  var ctx = canvas.getContext('2d');
+  ctx.globalCompositeOperation = 'destination-out';
+});