title: jQuery Signature Pad: get JSON output using typed version
body: <p>I've been using Thomas J. Bradley's jQuery Signature Pad plugin for capturing drawn signatures and it works well. What I'd like to do is also allow typed signatures <a href="http://thomasjbradley.ca/lab/signature-pad/accept/" rel="nofollow noreferrer">as shown in demo</a> but have it output the same data as a drawn signature (JSON representation).</p>
  <p>Since the data output is actual coordinates of the cursor as it moves over the canvas, I'm guessing it would have to emulate that mouse or touch movement. I found another <a href="https://stackoverflow.com/questions/15823328/html5-edit-text-on-the-canvas">Stackoverflow answer about drawing text on the canvas</a>. Is there a way to emulate the tracing of that drawn text? If so, that might be one solution.</p>
  <h2>Update</h2>
  <p>I gave up on my original plan.</p>
  <p>Since my end goal was to get the same output whether using a typed or drawn signature, I decided to use the provided <code>getSignatureImage()</code> method. However, the <code>getSignatureImage()</code> method only works with the drawn version of a signature. I implemented the following code to &quot;draw&quot; a typed signature onto a temporary canvas:</p>
  <pre><code>var canvas = $(&quot;canvas&quot;).get(0);
  var ctx = canvas.getContext(&quot;2d&quot;);
  
  // signature_name is the id of the input element
  var tempCanvasHtml = '&lt;canvas id=&quot;temp_canvas&quot; style=&quot;display:none;&quot; width=&quot;400&quot; height=&quot;120&quot;&gt;&lt;/canvas&gt;';
  $(&quot;.signature_form&quot;).append(tempCanvasHtml);
  var tempCanvas = $(&quot;#temp_canvas&quot;).get(0);
  var tempCtx = tempCanvas.getContext(&quot;2d&quot;);
  tempCtx.font = &quot;3.875em/50px 'Journal',Georgia,Times,serif&quot;;
  tempCtx.fillStyle = '#145394';
  tempCtx.fillText($(&quot;#signature_name&quot;).val(), 5, 90);
  var img = tempCanvas.toDataURL(&quot;image/png&quot;);
  tempCanvas.remove();
  </code></pre>
  <p>I run this code when the signature is accepted or the form is submitted. If the signature was drawn I use <code>getSignatureImage()</code>, when it's typed I use the above code.</p>
  <p>Note: using this code will produce an image without the canvas background, something that the plugin doesn't support with <code>getSignatureImage()</code>. I had to <a href="https://github.com/thomasjbradley/signature-pad/pull/129" rel="nofollow noreferrer">modify the plugin</a>.</p>