jq-signature.js
function() {
			this.id = 'jq-signature-canvas-' + (++idCounter);

      // Set up the canvas
      this.$canvas = $(canvasFixture).appendTo(this.$element);
      this.$canvas.attr({
        width: this.settings.width,
        height: this.settings.height
      });
      this.$canvas.css({
        boxSizing: 'border-box',
        width: this.settings.width + 'px',
        height: this.settings.height + 'px',
        border: this.settings.border,
        background: this.settings.background,
        cursor: 'crosshair'
      });
      this.$canvas.attr('id', this.id);

      // Fit canvas to width of parent
      if (this.settings.autoFit === true) {
        this._resizeCanvas();
        // TODO - allow for dynamic canvas resizing
        // (need to save canvas state before changing width to avoid getting cleared)
        // var timeout = false;
        // $(window).on('resize', $.proxy(function(e) {
        //   clearTimeout(timeout);
        //   timeout = setTimeout($.proxy(this._resizeCanvas, this), 250);
        // }, this));
      }
      this.canvas = this.$canvas[0];
      this._resetCanvas();

			// Listen for pointer/mouse/touch events
			// TODO - PointerEvent isn't fully supported, but eventually do something like this:
			// if (window.PointerEvent) {
			// 	this.$canvas.parent().css('-ms-touch-action', 'none');
			// 	this.$canvas.on("pointerdown MSPointerDown", $.proxy(this._downHandler, this));
      //   this.$canvas.on("pointermove MSPointerMove", $.proxy(this._moveHandler, this));
			// 	this.$canvas.on("pointerup MSPointerUp", $.proxy(this._upHandler, this));
      // }
      // else {
      //   this.$canvas.on('mousedown touchstart', $.proxy(this._downHandler, this));
      //   this.$canvas.on('mousemove touchmove', $.proxy(this._moveHandler, this));
      //   this.$canvas.on('mouseup touchend', $.proxy(this._upHandler, this));
      // }
      this.$canvas.on('mousedown touchstart', $.proxy(this._downHandler, this));
      this.$canvas.on('mousemove touchmove', $.proxy(this._moveHandler, this));
      this.$canvas.on('mouseup touchend', $.proxy(this._upHandler, this));

      // Start drawing
      var that = this;
      (function drawLoop() {
        window.requestAnimFrame(drawLoop);
        that._renderCanvas();
      })();
    }
function() {
			this.id = 'jq-signature-canvas-' + (++idCounter);

      // Set up the canvas
      this.$canvas = $(canvasFixture).appendTo(this.$element);
      this.$canvas.attr({
        width: this.settings.width,
        height: this.settings.height
      });
      this.$canvas.css({
        boxSizing: 'border-box',
        width: this.settings.width + 'px',
        height: this.settings.height + 'px',
        border: this.settings.border,
        background: this.settings.background,
        cursor: 'crosshair'
      });
      this.$canvas.attr('id', this.id);

      // Fit canvas to width of parent
      if (this.settings.autoFit === true) {
        this._resizeCanvas();
        // TODO - allow for dynamic canvas resizing
        // (need to save canvas state before changing width to avoid getting cleared)
        // var timeout = false;
        // $(window).on('resize', $.proxy(function(e) {
        //   clearTimeout(timeout);
        //   timeout = setTimeout($.proxy(this._resizeCanvas, this), 250);
        // }, this));
      }
      this.canvas = this.$canvas[0];
      this._resetCanvas();

			// Listen for pointer/mouse/touch events
			// TODO - PointerEvent isn't fully supported, but eventually do something like this:
			// if (window.PointerEvent) {
			// 	this.$canvas.parent().css('-ms-touch-action', 'none');
			// 	this.$canvas.on("pointerdown MSPointerDown", $.proxy(this._downHandler, this));
      //   this.$canvas.on("pointermove MSPointerMove", $.proxy(this._moveHandler, this));
			// 	this.$canvas.on("pointerup MSPointerUp", $.proxy(this._upHandler, this));
      // }
      // else {
      //   this.$canvas.on('mousedown touchstart', $.proxy(this._downHandler, this));
      //   this.$canvas.on('mousemove touchmove', $.proxy(this._moveHandler, this));
      //   this.$canvas.on('mouseup touchend', $.proxy(this._upHandler, this));
      // }
      this.$canvas.on('mousedown touchstart', $.proxy(this._downHandler, this));
      this.$canvas.on('mousemove touchmove', $.proxy(this._moveHandler, this));
      this.$canvas.on('mouseup touchend', $.proxy(this._upHandler, this));

      // Start drawing
      var that = this;
      (function drawLoop() {
        window.requestAnimFrame(drawLoop);
        that._renderCanvas();
      })();
    }
function ( ) { this . id = 'jq-signature-canvas-' + ( ++ idCounter ) ; // Set up the canvas this . $canvas = $ ( canvasFixture ) . appendTo ( this . $element ) ; this . $canvas . attr ( { width : this . settings . width , height : this . settings . height } ) ; this . $canvas . css ( { boxSizing : 'border-box' , width : this . settings . width + 'px' , height : this . settings . height + 'px' , border : this . settings . border , background : this . settings . background , cursor : 'crosshair' } ) ; this . $canvas . attr ( 'id' , this . id ) ; // Fit canvas to width of parent if ( this . settings . autoFit === true ) { this . _resizeCanvas ( ) ; // TODO - allow for dynamic canvas resizing // (need to save canvas state before changing width to avoid getting cleared) // var timeout = false; // $(window).on('resize', $.proxy(function(e) { //   clearTimeout(timeout); //   timeout = setTimeout($.proxy(this._resizeCanvas, this), 250); // }, this)); } this . canvas = this . $canvas [ 0 ] ; this . _resetCanvas ( ) ; // Listen for pointer/mouse/touch events // TODO - PointerEvent isn't fully supported, but eventually do something like this: // if (window.PointerEvent) { // 	this.$canvas.parent().css('-ms-touch-action', 'none'); // 	this.$canvas.on("pointerdown MSPointerDown", $.proxy(this._downHandler, this)); //   this.$canvas.on("pointermove MSPointerMove", $.proxy(this._moveHandler, this)); // 	this.$canvas.on("pointerup MSPointerUp", $.proxy(this._upHandler, this)); // } // else { //   this.$canvas.on('mousedown touchstart', $.proxy(this._downHandler, this)); //   this.$canvas.on('mousemove touchmove', $.proxy(this._moveHandler, this)); //   this.$canvas.on('mouseup touchend', $.proxy(this._upHandler, this)); // } this . $canvas . on ( 'mousedown touchstart' , $ . proxy ( this . _downHandler , this ) ) ; this . $canvas . on ( 'mousemove touchmove' , $ . proxy ( this . _moveHandler , this ) ) ; this . $canvas . on ( 'mouseup touchend' , $ . proxy ( this . _upHandler , this ) ) ; // Start drawing var that = this ; ( function drawLoop ( ) { window . requestAnimFrame ( drawLoop ) ; that . _renderCanvas ( ) ; } ) ( ) ; }
Initialize the signature canvas
Initialize the signature canvas