2 signature pads - RESIZE / REDRAW

by Florian Bar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<div class="outer_wrapper_for_context">
<p class="notice">
* RESIZE / REDRAW VERSION *
</p>

  <p class="notice">01. click step 01, 02 and 03 to move between fieldsets</p>

  <p class="notice">02. draw signatures in step 03, then navigate back to a previous step, then back to step 03</p>

  <p class="notice">03. to mimic windowResize event in jsFiddle envirionment, resize this jsFiddle result window</p>

  <p class="notice">04. signatures are persistent across steps</p>

  <button class="b b1">
    step 01
  </button>
  <button class="b b2">
    step 02
  </button>
  <button class="b b3">
    step 03
  </button>
  <form>
    <fieldset id="one">step 01</fieldset>
    <fieldset id="two">step 02</fieldset>
    <fieldset id="three">
      <div class="html_wrapper">
        <div class="canvas_container">
          <div class="canvas_container_left">

            <div id="signature-pad-left" class="m-signature-pad">
              <div class="m-signature-pad--body">
                <div class="clear_sig_button clear_left_sig">clear</div>
                <canvas></canvas>
              </div>
            </div>
            <div class="sig_print_wrapper">
              <input id="sales_rep_printed_name" placeholder="Sales Representative" type="text" class="printed_name">
            </div>
          </div>
          <div class="canvas_container_right">

            <div id="signature-pad-right" class="m-signature-pad">
              <div class="m-signature-pad--body">
                <div class="clear_sig_button clear_right_sig">clear</div>
                <canvas></canvas>
              </div>
            </div>
            <div class="sig_print_wrapper">
              <input id="customer_printed_name" placeholder="Customer Name" type="text" class="printed_name">
              <input id="customer_printed_position" placeholder="Customer Position" type="text"...

CSS

/* hide step 02 on page load */

#two {
  display: none;
}

fieldset {
  min-height: 250px;
}


/* hide submit button on page load */

.submit_left,
.submit_right {
  display: none;
}

p.notice {
  font-family: arial;
  font-size: 14px;
  line-height: 18px;
}

* {
  box-sizing: border-box;
}

.html_wrapper {
  width: 100%;
  position: relative;
}

.canvas_container {
  border: 1px solid #adadad;
  position: relative;
  background: #fff;
  margin-top: 10px;
}

.canvas_container_left {
  border-right: 1px solid #adadad;
}

.canvas_container_left,
.canvas_container_right {
  float: left;
  width: 50%;
  position: relative;
}

.canvas_container:after {
  clear: both;
  content: " ";
  height: 0;
  display: block;
}

.sig_checkbox_wrapper {
  background: #f3faff;
  padding: 20px 18px 15px 18px;
  border: 1px solid #adadad;
  border-top: none;
  display: flex;
}

.sig_checkbox_wrapper:after {
  clear: both;
  display: block;
  content: " ";
  height: 0;
}

#sig_checkbox {
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
  margin-right: 15px;
  /*to increase size of checkbox, see: https://stackoverflow.com/a/10415275/1063287*/
}

.sig_statement {
  display: inline-block;
  font-family: arial;
  font-size: 13px;
  margin: 0px;
  padding: 0px;
  color: #8a8a8a;
  line-height: 27px;
  margin-bottom: -5px;
  margin-top: -5px;
}

.sig_checkbox_left_col {
  float: left;
}

.sig_checkbox_right_col {
  float: left;
}

.terms_and_conditions_external_link {
  color: #8a8a8a;
}

.clear_sig_button {
  color: #8a8a8a;
  font-family: arial;
  padding: 3px 10px;
  border: 1px solid #ececec;
  text-align: center;
  border-radius: 2px;
  font-size: 12px;
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 2;
}

.clear_sig_button:hover {
  cursor: pointer !important;
}

.sig_print_wrapper {
  background: #eee;
}

.printed_name {
  width: 100%;
  padding: 10px 10px;
  border: 1px solid #adadad;
  border-left: none;
  border-right: none;
  border-bottom: none;
  font-size:...

JavaScript

// 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() {

  // javascript referencing (rather than jQuery) is required
  // in order to use getContext()
  // see: https://stackoverflow.com/a/5808190

  // get a reference to the wrapper for the left signature pad
  var wrapper_left = document.getElementById("signature-pad-left");
  // get a reference to the canvas for the left signature pad
  var canvas_left = wrapper_left.querySelector("canvas");

  // get a reference to the wrapper for the right signature pad
  var wrapper_right = document.getElementById("signature-pad-right");
  // get a reference to the canvas for the right signature pad
  var canvas_right = wrapper_right.querySelector("canvas");

  // The Math.max() function returns the largest of zero or more numbers, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max

  // The `devicePixelRatio` property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel., see: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

  // The code below therefore determines the ratio that will be multiplied by the canvas's offsetWidth in order to scale the canvas correctly
  var ratio = Math.max(window.devicePixelRatio || 1, 1);

  // The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width - see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

  // set width and height of left canvas
  canvas_left.width...