Signature Pad - "Type It" not working

Question

I am trying to use this(GitHub), Where my "Draw It" is working as expected but "Type It" functionality is not giving me any value in my inputHidden field.

Please, Refer the VF page code and Screenshot for more information :

Draw It

Type It

VF Page Code

<apex:page standardController="Case" extensions="signaturepadCaseController">
   <apex:includeScript value="{!URLFOR($Resource.jQuery,'js/jquery-1.6.2.min.js')}" />
   <apex:includeScript value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.min.js')}" />
   <apex:includeScript value="{!URLFOR($Resource.signature,'/signature/json2.min.js')}" />
   <apex:stylesheet value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.css')}" />

   <form method="post" action="#" class="sigPad">
       <label for="name">Print your name</label>
       <input type="text" name="name" id="name" class="name"/>
       <p class="typeItDesc">Review your signature</p>
       <p class="drawItDesc">Draw your signature</p>
      <ul class="sigNav">
         <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
         <li class="drawIt"><a href="#draw-it">Draw It</a></li>
         <li class="clearButton"><a href="#clear">Clear</a></li>
      </ul>
       <canvas class="pad" width="198" height="55" id="signatureCanvas1"></canvas>
      <div class="sig sigWrapper">
         <div class="typed" id="typeit">             
         </div>

         <canvas class="pad" width="198" height="55" id="signatureCanvas"></canvas>
         <input type="hidden" name="output" class="output" id="hidden"></input>

      </div>
      <input type="button" onclick="saveSignature();" value="Accept" class="btn" target="_parent" />
   </form>
   <script>
     // $('.sigPad').signaturePad(options);
      j$ = jQuery.noConflict();
      var api;
      j$(document).ready(function() {
          api = j$('.sigPad').signaturePad();
      });

      var canvas;
      var canvas1;
      var RecordID = '';

      function saveSignature() {
          canvas = document.getElementById("signatureCanvas");
          canvas1 = document.getElementById("signatureCanvas1");
         // if(j$('#hidden').val() == ''){                     
         //       alert('Please draw your signature');
         // }           
         // else{
              RecordId = '{!caseId}';
              var imgData;

              typeSign = j$('#typeit').text();

              if (typeSign != '') {                  
                  var ctx = canvas1.getContext("2d");
                  ctx.fillText(typeSign, 10, 10);      
              }
              imgData = canvas1.toDataURL("image/jpeg");
              imgData = imgData.split(',')[1];
              console.log('---'+imgData);
              strDataURI = imgData;              
              SignaturePad.signaturepadCaseController.saveSignature(strDataURI, RecordId, handleResult);
         // }
      }

      function handleResult(result) {

          if (result.indexOf('success:true')) {
              //window.top.location = '/{!Case.id}';
          } else {
              alert(result);
          }
      }
   </script>
</apex:page>

Answer 1

The output variable is only set when drawing a signature. When typing a signature the canvas isn't drawn to and instead a div with the text in is overlaid to create the effect. You can see more details issue in the project's issue tracker with a possible solution if you're okay with forking the code.