Javascript signature demo

Javascript signature demo2014-09-231. Save Jquery Sinature file as jquery.signature.js:

/* http://keith-wood.name/signature.html
Signature plugin for jQuery UI v1.1.0.
Requires excanvas.js in IE.
Written by Keith Wood （kbwood{at}iinet.com.au） April 2012.
Available under the MIT （https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt） license.
Please attribute the author if you use it. */

（function（$） { // Hide scope, no $ conflict

var signatureOverrides = {

// Global defaults for signature
options: {
background: "transparent",//"#ffffff", // Colour of the background
color: "#000000", // Colour of the signature
thickness: 3, // Thickness of the lines
guideline: true, // Add a guide line or not？
guidelineColor: "#c0c0c0", // Guide line colour
guidelineOffset: 50, // Guide line offset from the bottom
guidelineIndent: 10, // Guide line indent from the edges
notAvailable: "Your browser doesn"t support signing", // Error message when no canvas
syncField: null, // Selector for synchronised text field
change: null // Callback when signature changed
},

/* Initialise a new signature area. */
_create: function（） {
this.element.addClass（this.widgetFullName || this.widgetBaseClass）;
try {
this.canvas = $（"<canvas id="signature_canvas" width="" + this.element.width（） + "" height="" +
this.element.height（） + "">" + this.options.notAvailable + "</canvas>"）[0];
this.element.append（this.canvas）;
this.ctx = this.canvas.getContext（"2d"）;
}
catch （e） {
$（this.canvas）.remove（）;
this.resize = true;
this.canvas = document.createElement（"canvas"）;
this.canvas.setAttribute（"id", "signature_canvas"）;
this.canvas.setAttribute（"width", this.element.width（））;
this.canvas.setAttribute（"height", this.element.height（））;
this.canvas.innerHTML = this.options.notAvailable;
this.element.append（this.canvas）;
if （G_vmlCanvasManager） { // Requires excanvas.js
G_vmlCanvasManager.initElement（this.canvas）;
}
this.ctx = this.canvas.getContext（"2d"）;
}
this._refresh（true）;
this._mouseInit（）;
},

/* Refresh the appearance of the signature area.
@param init （boolean, internal） true if initialising */
_refresh: function（init） {
if （this.resize） {
var parent = $（this.canvas）;
$（"div", this.canvas）.css（{width: parent.width（）, height: parent.height（）}）;
}

this.ctx.fillStyle = this.options.background;
this.ctx.strokeStyle = this.options.color;
this.ctx.lineWidth = this.options.thickness;
this.ctx.lineCap = "round";
this.ctx.lineJoin = "round";
this.clear（init）;
},

/* Clear the signature area.
@param init （boolean, internal） true if initialising */
clear: function（init） {
this.ctx.fillRect（0, 0, this.element.width（）, this.element.height（））;
if （this.options.guideline） {
this.ctx.save（）;
this.ctx.strokeStyle = this.options.guidelineColor;
this.ctx.lineWidth = 1;
this.ctx.beginPath（）;
this.ctx.moveTo（this.options.guidelineIndent,
this.element.height（） - this.options.guidelineOffset）;
this.ctx.lineTo（this.element.width（） - this.options.guidelineIndent,
this.element.height（） - this.options.guidelineOffset）;
this.ctx.stroke（）;
this.ctx.restore（）;
}
this.lines = [];
if （！init） {
this._changed（）;
}
},

reinit: function（） {
$（this.canvas）.remove（）;
this._create（）;
},

/* Synchronise changes and trigger change event.
@param event （Event） the triggering event */
_changed: function（event） {
if （this.options.syncField） {
$（this.options.syncField）.val（this.toJSON（））;
}
this._trigger（"change", event, {}）;
},

/* Custom options handling.
@param options （object） the new option values */
_setOptions: function（options） {
if （this._superApply） {
this._superApply（arguments）; // Base widget handling
}
else {
$.Widget.prototype._setOptions.apply（this, arguments）; // Base widget handling
}
this._refresh（）;
},