``` The `.sig` and `.sigWrapper` div is hidden by default and wraps the canvas and generated signature together allowing overlapping positions. ```html

``` The `.typed` div will have the value typed into the input field inserted into it. This is effectively the automatically generated signature. It can be styled in any fashion, but the samples use `@font-face` to make the text look semi-handwritten. ```html

``` Obviously, the canvas element for allowing the user to draw their signature. ```html ``` The `.output` hidden input field is where the JSON representation of the signature is stored for submission to a server. #### Form Submission & Validation Signature Pad automatically validates the name input field on form submission by checking to see if it is empty. If the field is empty the form isn’t submitted and Signature Pad prepends an error message to the top of the form. Signature Pad assigns an error class to the input and the label and also sets the focus on the name field. Both the error message and error class are [options](#options) that can be changed. *There are also options for changing the functionality of the validation.* ### Require a Drawn Signature **[Demo of requiring a drawn signature](https://thomasjbradley.github.io/signature-pad/examples/require-drawn-signature.html)** The form can be set up to require the user to draw their signature as well as type their name into the field. This example is almost identical to the above example, but since the user must draw their signature the HTML for typing their signature is not required. So **remove** the following two lines: ```html

Review your signature

``` and **delete**: ```html

Type It

``` Then add the `drawOnly` option to the Javascript and set it to true. This option disables the typeIt actions and validates that the user has drawn their signature. ```js $(document).ready(function () { $('.sigPad').signaturePad({drawOnly:true}); }); ``` ### Regenerating Signatures **[Demo of regenerating a signature](https://thomasjbradley.github.io/signature-pad/examples/regenerate-signature.html)** Regenerating signatures from a JSON representation is quite simple. Signature Pad accepts the JSON (string or native Javascript array) and simply redraws the signature onto the canvas element. #### Javascript ```js var sig = [{lx:20,ly:34,mx:20,my:34},{lx:21,ly:33,mx:20,my:34},…]; $(document).ready(function () { $('.sigPad').signaturePad({displayOnly:true}).regenerate(sig); }); ``` `sig` is a variable that contains the JSON representation of the signature. In the above example you can see what the JSON looks like—though it has been trimmed for brevity’s sake. Also notice that an options variable is passed into the `signaturePad()` method. The `displayOnly` property tells Signature Pad not to initialize any of the standard HTML elements, mouse events or click events. [Signature Pad Options Reference](#options-ref) After initializing the canvas, call the `regnerate()` method and pass it our JSON signature. This method simply redraws the signature onto the canvas element. ##### Alternative Javascript ```js var api = $('.sigPad').signaturePad({displayOnly:true}); api.regenerate(sig); ``` Both snippets do exactly the same thing. The only difference is that in this example the API is stored in a variable and referred to later on. #### HTML Template ```html

Sir John A. Macdonald

Sir John A. Macdonald
July 1, 1867

``` The HTML for displaying a signature is much simpler. The primary component is, of course, the canvas element. The typed `

` is still there, for progressive enhancement, and will show the automatically generated signature using HTML and CSS if Javascript and canvas are not available. ### Resizing the Signature Pad There are a couple different places you have to update to change the size: the HTML and the CSS. Change the dimensions of the `

Method	Arguments	Return	Description
`signaturePad()`		`string`	Retrieves the current version of Signature Pad programmatically.
`regenerate(paths)`	`paths:array\|string` An array of objects representing the movement and lines of the signature	`void`	Redraws a signature on the canvas element using an array of objects representing the movement and lines of the signature
`clearCanvas()`		`void`	Clears all the drawn elements off the canvas and redraws the background colour and signature line
`getSignature()`		`array` The signature as a native Javascript array	Returns the drawn signature as a native Javascript array Each item in the array is an object following this format: `{lx : 20, ly : 34, mx : 20, my : 34}` lx The lineTo() x coordinate ly The lineTo() y coordinate mx The moveTo() x coordinate my The moveTo() y coordinate
`getSignatureString()`		`string` The signature as a JSON string; for saving	Returns the drawn signature as a Javascript string in the JSON format The string follows this format: `[{"lx":20,"ly":34,"mx":20,"my":34},…]`
`getSignatureImage()`		`string` The Base64 encoded PNG of the signature	Returns a Base64 encoded PNG of the canvas Check out Signature to Image for a server-side solution
`updateOptions(options)`	`options:object` An object representing the options to change	`void`	Allows for some options to be updated later in code. Only need to pass the options that are different from initialization.
`validateForm()`		`boolean` Whether the form is valid or not	Allows you to call the form validation function whenever it’s best for you. As an example, in your own form validation code. Probably best to use with the validate fields option set to false: `$('.sigPad').signaturePad({ validateFields : false });`