Working with canvas saving and reseting

by devangkantharia

HTML

<canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="100"></canvas>
<div class="signature-buttons" style="float:none; margin-left:155px; margin-top:-15px;">
                    <span class="save-signature">Save Signature | </span> 
                    <span class="reset-canvas">| Reset Signature</span><br/>
                </div>

CSS

.signature-field{float:left; width:100%; min-height:100px; font-size:22px; padding:20px 0px; display:none;}
.signature-field input{font-size:22px; border-bottom:2px solid #000; width:325px;}
.save-signature, .reset-canvas{color:blue; font-size:12px; cursor:pointer;}
.save-signature:hover, .reset-canvas:hover{text-decoration:underline;}.signature-field{float:left; width:100%; min-height:100px; font-size:22px; padding:20px 0px; display:none;}

JavaScript

/*working with canvas saving and reseting */

var __slice = Array.prototype.slice;
(function($) {
  var Sketch;
  $.fn.sketch = function() {
    var args, key, sketch;
    key = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
    if (this.length > 1) {
      $.error('Sketch.js can only be called on one element at a time.');
    }
    sketch = this.data('sketch');
    if (typeof key === 'string' && sketch) {
      if (sketch[key]) {
        if (typeof sketch[key] === 'function') {
          return sketch[key].apply(sketch, args);
        } else if (args.length === 0) {
          return sketch[key];
        } else if (args.length === 1) {
          return sketch[key] = args[0];
        }
      } else {
        return $.error('Sketch.js did not recognize the given command.');
      }
    } else if (sketch) {
      return sketch;
    } else {
      this.data('sketch', new Sketch(this.get(0), key));
      return this;
    }
  };
  Sketch = (function() {
    function Sketch(el, opts) {
      this.el = el;
      this.canvas = $(el);
      this.context = el.getContext('2d');
      this.options = $.extend({
        toolLinks: true,
        defaultTool: 'marker',
        defaultColor: '#000000',
        defaultSize: 5
      }, opts);
      this.painting = false;
      this.color = this.options.defaultColor;
      this.size = this.options.defaultSize;
      this.tool = this.options.defaultTool;
      this.actions = [];
      this.action = [];
      this.canvas.bind('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);
      if (this.options.toolLinks) {
        $('body').delegate("a[href=\"#" + (this.canvas.attr('id')) + "\"]", 'click', function(e) {
          var $canvas, $this, key, sketch, _i, _len, _ref;
          $this = $(this);
          $canvas = $($this.attr('href'));
          sketch = $canvas.data('sketch');
          _ref = ['color', 'size', 'tool'];
          for (_i = 0,...