Instance Settings

Customise each targetted input field with the settings below (all are optional):

$(selector).signature({guideline: true});

background | change | color | disabled | distance | guideline | guidelineColor | guidelineIndent | guidelineOffset | notAvailable | scale | svgStyles | syncField | syncFormat | thickness

NameTypeDefaultComments
distancenumber0 The minimum distance (pixels) of movement to start a drag operation.
$(selector).signature({distance: 5});
backgroundstring'#ffffff' The background colour of the signature area. Specify this as a six character hexadecimal value prefixed by a hash (#), as a RGB triplet, or as a named colour.
$(selector).signature({background: '#0000ff'});
$(selector).signature({background: 'rgb(0,0,255)'});
$(selector).signature({background: 'blue'});
colorstring'#000000' The colour of the signature lines. Specify this as a six character hexadecimal value prefixed by a hash (#), as a RGB triplet, or as a named colour.
$(selector).signature({color: '#0000ff'});
$(selector).signature({color: 'rgb(0,0,255)'});
$(selector).signature({color: 'blue'});
thicknessnumber2 The thickness of the lines used to draw the signature.
guidelinebooleanfalse Set to true to draw a horizontal guideline within the signature area.
guidelineColorstring'#a0a0a0' The colour of the guideline (if present). Specify this as a six character hexadecimal value prefixed by a hash (#), as a RGB triplet, or as a named colour.
guidelineOffsetnumber50 The offset (pixels) of the guideline (if present) from the bottom of the signature area.
guidelineIndentnumber10 The indent (pixels) of the guideline (if present) from the sides of the signature area.
scalenumber1 A scaling factor for rendering the signature (only applies to redraws).
Since 1.2.1.
notAvailablestring 'Your browser doesn\'t support signing' The text to display in the signature area if the browser doesn't support the canvas element.
disabledbooleanfalse Set to true to disable the signature capture functionality. You can also use the disable and enable commands for this.
syncFieldstring or element or jQuerynull The element to keep synchronised with the JSON text for the signature. The value may be a string selector, a DOM element, or a jQuery object.
$(selector).signature({syncField: '#jsonSignature'});
syncFormatstring'JSON' The output representation that is automatically generated into the syncField. One of the following: 'JSON', 'SVG', 'PNG', 'JPEG'. PNG and JPEG output are generated as data: URLs.
$(selector).signature({syncField: '#svgSignature',
	syncFormat: 'SVG'});
Since 1.2.0.
svgStylesbooleanfalse Set to true to apply styles in SVG using the style attribute, rather than using individual inline attributes.
$(selector).signature({svgStyles: true});
Since 1.2.0.
changefunctionnull This function is called when the signature is changed: either by drawing a new line on it with the mouse, by clearing it, or by re-drawing an entire signature. The function receives two parameters: the triggering event and an empty UI object. You can also bind a handler to this event using its full name 'signaturechange'.
$(selector).signature({
	change: function(event, ui) {
		alert('The signature has changed');
	}
});
$(selector).signature().
	bind('signaturechange', function(event, ui) {
		alert('The signature has changed');
	});
Globals
NameTypeComments
$.kbw.signature.optionsobject The default settings to use with all signature instances. Update with:
$.extend($.kbw.signature.options, {guideline: true});
Commands

clear | destroy | disable | draw | enable | isEmpty | option (get) | option (set) | toDataURL | toJSON | toSVG

SignatureReturnsComments
$(selector).signature('option', settings)jQuery object Update the settings for the signature instance(s) attached to the given div(s).

settings (object) the collection of new settings.

$(selector).signature('option',
	{background: '#ffffcc', color: '#ff0000'});
$(selector).signature('option', name, value)jQuery object Update a particular setting for the signature instance(s) attached to the given div(s).

name (string) the name of the setting to change;
value (any) the new value of that setting.

$(selector).signature('option', 'background', '#ffffcc');
$(selector).signature('option', name)object or any Retrieve one or all of the current settings for the first signature instance attached to the given div(s).

name (string, optional) the name of the setting to retrieve; omit for all settings.

var settings = $(selector).signature('option');
var max = $(selector).signature('option', 'background');
$(selector).signature('enable')jQuery object Enable the signature capture functionality.
$(selector).signature('disable')jQuery object Disable the signature capture functionality.
$(selector).signature('destroy')jQuery object Remove the signature functionality from the given div(s).
$(selector).signature('clear')jQuery object Erase any current signature within the div(s). This triggers the change event.
$(selector).signature('isEmpty')boolean Determine whether the first signature area has any signature drawn within it.
$(selector).signature('toJSON')string Convert the first signature to a JSON string for transferral/storage. A sample follows for a signature with two lines:
{"lines":[[[100,100],[180,50],[180,150],[100,100]],
	[[140,75],[100,50],[100,150],[140,125]]]}
$(selector).signature('toSVG')string Convert the first signature to a SVG document for transferral/storage. A sample follows for a signature with two lines:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="15cm" height="15cm">
	<g fill="#ffffff">
		<rect x="0" y="0" width="400" height="200"/> 
		<g fill="none" stroke="#000000" stroke-width="2">
			<polyline points="100,100 180,50 180,150 100,100"/>
			<polyline points="140,75 100,50 100,150 140,125"/>
		</g>
	</g>
</svg>
Since 1.1.1.
$(selector).signature('toDataURL', type, quality)string Convert the first signature to a data: URL for transferral/storage.
data:image/png;base64,iVBORw0KGgoAAAAN...AAAASUVORK5CYII=
type (string) the image format to use ('image/png' (the default) or 'image/jpeg'),
quality (number) the image quality for JPEG images - a value between 0 and 1 (0.92 default).

$(selector).signature('toDataURL');
$(selector).signature('toDataURL', 'image/jpeg');
$(selector).signature('toDataURL', 'image/jpeg', 0.8);
Since 1.2.0.
$(selector).signature('draw', signature)jQuery object Re-draw the signature from the supplied definition. This triggers the change event.

signature (string or object) the JSON object or its string representation (as is obtained from the toJSON command), or (string) the SVG (as is obtained from the toSVG command), or (string) a data: URL (as is obtained from the toDataURL command).
Note that drawing using a data: URL does not reconstruct the internal signature description, and cannot be added to.

$(selector).signature('draw', json);
Since 1.1.0 - signature may be a JSON string.
Since 1.2.0 - signature may be SVG or a data: URL.