diff --git a/web_widget_digitized_signature/__openerp__.py b/web_widget_digitized_signature/__openerp__.py
index b8fb9770..e2e45e38 100644
--- a/web_widget_digitized_signature/__openerp__.py
+++ b/web_widget_digitized_signature/__openerp__.py
@@ -13,7 +13,7 @@
 
 {
     "name": "Web Widget Digitized Signature",
-    "version": "8.0.1.0.0",
+    "version": "8.0.2.0.0",
     "author": "Serpent Consulting Services Pvt. Ltd., "
                "Odoo Community Association (OCA)",
     "category": 'web',
diff --git a/web_widget_digitized_signature/static/lib/excanvas.js b/web_widget_digitized_signature/static/lib/excanvas.js
deleted file mode 100644
index 367764b4..00000000
--- a/web_widget_digitized_signature/static/lib/excanvas.js
+++ /dev/null
@@ -1,924 +0,0 @@
-// Copyright 2006 Google Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-
-// Known Issues:
-//
-// * Patterns are not implemented.
-// * Radial gradient are not implemented. The VML version of these look very
-//   different from the canvas one.
-// * Clipping paths are not implemented.
-// * Coordsize. The width and height attribute have higher priority than the
-//   width and height style values which isn't correct.
-// * Painting mode isn't implemented.
-// * Canvas width/height should is using content-box by default. IE in
-//   Quirks mode will draw the canvas using border-box. Either change your
-//   doctype to HTML5
-//   (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
-//   or use Box Sizing Behavior from WebFX
-//   (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
-// * Non uniform scaling does not correctly scale strokes.
-// * Optimize. There is always room for speed improvements.
-
-// Only add this code if we do not already have a canvas implementation
-if (!document.createElement('canvas').getContext) {
-
-(function() {
-
-  // alias some functions to make (compiled) code shorter
-  var m = Math;
-  var mr = m.round;
-  var ms = m.sin;
-  var mc = m.cos;
-  var abs = m.abs;
-  var sqrt = m.sqrt;
-
-  // this is used for sub pixel precision
-  var Z = 10;
-  var Z2 = Z / 2;
-
-  /**
-   * This funtion is assigned to the <canvas> elements as element.getContext().
-   * @this {HTMLElement}
-   * @return {CanvasRenderingContext2D_}
-   */
-  function getContext() {
-    return this.context_ ||
-        (this.context_ = new CanvasRenderingContext2D_(this));
-  }
-
-  var slice = Array.prototype.slice;
-
-  /**
-   * Binds a function to an object. The returned function will always use the
-   * passed in {@code obj} as {@code this}.
-   *
-   * Example:
-   *
-   *   g = bind(f, obj, a, b)
-   *   g(c, d) // will do f.call(obj, a, b, c, d)
-   *
-   * @param {Function} f The function to bind the object to
-   * @param {Object} obj The object that should act as this when the function
-   *     is called
-   * @param {*} var_args Rest arguments that will be used as the initial
-   *     arguments when the function is called
-   * @return {Function} A new function that has bound this
-   */
-  function bind(f, obj, var_args) {
-    var a = slice.call(arguments, 2);
-    return function() {
-      return f.apply(obj, a.concat(slice.call(arguments)));
-    };
-  }
-
-  var G_vmlCanvasManager_ = {
-    init: function(opt_doc) {
-      if (/MSIE/.test(navigator.userAgent) && !window.opera) {
-        var doc = opt_doc || document;
-        // Create a dummy element so that IE will allow canvas elements to be
-        // recognized.
-        doc.createElement('canvas');
-        doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
-      }
-    },
-
-    init_: function(doc) {
-      // create xmlns
-      if (!doc.namespaces['g_vml_']) {
-        doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml',
-                           '#default#VML');
-
-      }
-      if (!doc.namespaces['g_o_']) {
-        doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office',
-                           '#default#VML');
-      }
-
-      // Setup default CSS.  Only add one style sheet per document
-      if (!doc.styleSheets['ex_canvas_']) {
-        var ss = doc.createStyleSheet();
-        ss.owningElement.id = 'ex_canvas_';
-        ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
-            // default size is 300x150 in Gecko and Opera
-            'text-align:left;width:300px;height:150px}' +
-            'g_vml_\\:*{behavior:url(#default#VML)}' +
-            'g_o_\\:*{behavior:url(#default#VML)}';
-
-      }
-
-      // find all canvas elements
-      var els = doc.getElementsByTagName('canvas');
-      for (var i = 0; i < els.length; i++) {
-        this.initElement(els[i]);
-      }
-    },
-
-    /**
-     * Public initializes a canvas element so that it can be used as canvas
-     * element from now on. This is called automatically before the page is
-     * loaded but if you are creating elements using createElement you need to
-     * make sure this is called on the element.
-     * @param {HTMLElement} el The canvas element to initialize.
-     * @return {HTMLElement} the element that was created.
-     */
-    initElement: function(el) {
-      if (!el.getContext) {
-
-        el.getContext = getContext;
-
-        // Remove fallback content. There is no way to hide text nodes so we
-        // just remove all childNodes. We could hide all elements and remove
-        // text nodes but who really cares about the fallback content.
-        el.innerHTML = '';
-
-        // do not use inline function because that will leak memory
-        el.attachEvent('onpropertychange', onPropertyChange);
-        el.attachEvent('onresize', onResize);
-
-        var attrs = el.attributes;
-        if (attrs.width && attrs.width.specified) {
-          // TODO: use runtimeStyle and coordsize
-          // el.getContext().setWidth_(attrs.width.nodeValue);
-          el.style.width = attrs.width.nodeValue + 'px';
-        } else {
-          el.width = el.clientWidth;
-        }
-        if (attrs.height && attrs.height.specified) {
-          // TODO: use runtimeStyle and coordsize
-          // el.getContext().setHeight_(attrs.height.nodeValue);
-          el.style.height = attrs.height.nodeValue + 'px';
-        } else {
-          el.height = el.clientHeight;
-        }
-        //el.getContext().setCoordsize_()
-      }
-      return el;
-    }
-  };
-
-  function onPropertyChange(e) {
-    var el = e.srcElement;
-
-    switch (e.propertyName) {
-      case 'width':
-        el.style.width = el.attributes.width.nodeValue + 'px';
-        el.getContext().clearRect();
-        break;
-      case 'height':
-        el.style.height = el.attributes.height.nodeValue + 'px';
-        el.getContext().clearRect();
-        break;
-    }
-  }
-
-  function onResize(e) {
-    var el = e.srcElement;
-    if (el.firstChild) {
-      el.firstChild.style.width =  el.clientWidth + 'px';
-      el.firstChild.style.height = el.clientHeight + 'px';
-    }
-  }
-
-  G_vmlCanvasManager_.init();
-
-  // precompute "00" to "FF"
-  var dec2hex = [];
-  for (var i = 0; i < 16; i++) {
-    for (var j = 0; j < 16; j++) {
-      dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
-    }
-  }
-
-  function createMatrixIdentity() {
-    return [
-      [1, 0, 0],
-      [0, 1, 0],
-      [0, 0, 1]
-    ];
-  }
-
-  function matrixMultiply(m1, m2) {
-    var result = createMatrixIdentity();
-
-    for (var x = 0; x < 3; x++) {
-      for (var y = 0; y < 3; y++) {
-        var sum = 0;
-
-        for (var z = 0; z < 3; z++) {
-          sum += m1[x][z] * m2[z][y];
-        }
-
-        result[x][y] = sum;
-      }
-    }
-    return result;
-  }
-
-  function copyState(o1, o2) {
-    o2.fillStyle     = o1.fillStyle;
-    o2.lineCap       = o1.lineCap;
-    o2.lineJoin      = o1.lineJoin;
-    o2.lineWidth     = o1.lineWidth;
-    o2.miterLimit    = o1.miterLimit;
-    o2.shadowBlur    = o1.shadowBlur;
-    o2.shadowColor   = o1.shadowColor;
-    o2.shadowOffsetX = o1.shadowOffsetX;
-    o2.shadowOffsetY = o1.shadowOffsetY;
-    o2.strokeStyle   = o1.strokeStyle;
-    o2.globalAlpha   = o1.globalAlpha;
-    o2.arcScaleX_    = o1.arcScaleX_;
-    o2.arcScaleY_    = o1.arcScaleY_;
-    o2.lineScale_    = o1.lineScale_;
-  }
-
-  function processStyle(styleString) {
-    var str, alpha = 1;
-
-    styleString = String(styleString);
-    if (styleString.substring(0, 3) == 'rgb') {
-      var start = styleString.indexOf('(', 3);
-      var end = styleString.indexOf(')', start + 1);
-      var guts = styleString.substring(start + 1, end).split(',');
-
-      str = '#';
-      for (var i = 0; i < 3; i++) {
-        str += dec2hex[Number(guts[i])];
-      }
-
-      if (guts.length == 4 && styleString.substr(3, 1) == 'a') {
-        alpha = guts[3];
-      }
-    } else {
-      str = styleString;
-    }
-
-    return {color: str, alpha: alpha};
-  }
-
-  function processLineCap(lineCap) {
-    switch (lineCap) {
-      case 'butt':
-        return 'flat';
-      case 'round':
-        return 'round';
-      case 'square':
-      default:
-        return 'square';
-    }
-  }
-
-  /**
-   * This class implements CanvasRenderingContext2D interface as described by
-   * the WHATWG.
-   * @param {HTMLElement} surfaceElement The element that the 2D context should
-   * be associated with
-   */
-  function CanvasRenderingContext2D_(surfaceElement) {
-    this.m_ = createMatrixIdentity();
-
-    this.mStack_ = [];
-    this.aStack_ = [];
-    this.currentPath_ = [];
-
-    // Canvas context properties
-    this.strokeStyle = '#000';
-    this.fillStyle = '#000';
-
-    this.lineWidth = 1;
-    this.lineJoin = 'miter';
-    this.lineCap = 'butt';
-    this.miterLimit = Z * 1;
-    this.globalAlpha = 1;
-    this.canvas = surfaceElement;
-
-    var el = surfaceElement.ownerDocument.createElement('div');
-    el.style.width =  surfaceElement.clientWidth + 'px';
-    el.style.height = surfaceElement.clientHeight + 'px';
-    el.style.overflow = 'hidden';
-    el.style.position = 'absolute';
-    surfaceElement.appendChild(el);
-
-    this.element_ = el;
-    this.arcScaleX_ = 1;
-    this.arcScaleY_ = 1;
-    this.lineScale_ = 1;
-  }
-
-  var contextPrototype = CanvasRenderingContext2D_.prototype;
-  contextPrototype.clearRect = function() {
-    this.element_.innerHTML = '';
-  };
-
-  contextPrototype.beginPath = function() {
-    // TODO: Branch current matrix so that save/restore has no effect
-    //       as per safari docs.
-    this.currentPath_ = [];
-  };
-
-  contextPrototype.moveTo = function(aX, aY) {
-    var p = this.getCoords_(aX, aY);
-    this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
-    this.currentX_ = p.x;
-    this.currentY_ = p.y;
-  };
-
-  contextPrototype.lineTo = function(aX, aY) {
-    var p = this.getCoords_(aX, aY);
-    this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
-
-    this.currentX_ = p.x;
-    this.currentY_ = p.y;
-  };
-
-  contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
-                                            aCP2x, aCP2y,
-                                            aX, aY) {
-    var p = this.getCoords_(aX, aY);
-    var cp1 = this.getCoords_(aCP1x, aCP1y);
-    var cp2 = this.getCoords_(aCP2x, aCP2y);
-    bezierCurveTo(this, cp1, cp2, p);
-  };
-
-  // Helper function that takes the already fixed cordinates.
-  function bezierCurveTo(self, cp1, cp2, p) {
-    self.currentPath_.push({
-      type: 'bezierCurveTo',
-      cp1x: cp1.x,
-      cp1y: cp1.y,
-      cp2x: cp2.x,
-      cp2y: cp2.y,
-      x: p.x,
-      y: p.y
-    });
-    self.currentX_ = p.x;
-    self.currentY_ = p.y;
-  }
-
-  contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
-    // the following is lifted almost directly from
-    // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
-
-    var cp = this.getCoords_(aCPx, aCPy);
-    var p = this.getCoords_(aX, aY);
-
-    var cp1 = {
-      x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
-      y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
-    };
-    var cp2 = {
-      x: cp1.x + (p.x - this.currentX_) / 3.0,
-      y: cp1.y + (p.y - this.currentY_) / 3.0
-    };
-
-    bezierCurveTo(this, cp1, cp2, p);
-  };
-
-  contextPrototype.arc = function(aX, aY, aRadius,
-                                  aStartAngle, aEndAngle, aClockwise) {
-    aRadius *= Z;
-    var arcType = aClockwise ? 'at' : 'wa';
-
-    var xStart = aX + mc(aStartAngle) * aRadius - Z2;
-    var yStart = aY + ms(aStartAngle) * aRadius - Z2;
-
-    var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
-    var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
-
-    // IE won't render arches drawn counter clockwise if xStart == xEnd.
-    if (xStart == xEnd && !aClockwise) {
-      xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
-                       // that can be represented in binary
-    }
-
-    var p = this.getCoords_(aX, aY);
-    var pStart = this.getCoords_(xStart, yStart);
-    var pEnd = this.getCoords_(xEnd, yEnd);
-
-    this.currentPath_.push({type: arcType,
-                           x: p.x,
-                           y: p.y,
-                           radius: aRadius,
-                           xStart: pStart.x,
-                           yStart: pStart.y,
-                           xEnd: pEnd.x,
-                           yEnd: pEnd.y});
-
-  };
-
-  contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
-    this.moveTo(aX, aY);
-    this.lineTo(aX + aWidth, aY);
-    this.lineTo(aX + aWidth, aY + aHeight);
-    this.lineTo(aX, aY + aHeight);
-    this.closePath();
-  };
-
-  contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
-    var oldPath = this.currentPath_;
-    this.beginPath();
-
-    this.moveTo(aX, aY);
-    this.lineTo(aX + aWidth, aY);
-    this.lineTo(aX + aWidth, aY + aHeight);
-    this.lineTo(aX, aY + aHeight);
-    this.closePath();
-    this.stroke();
-
-    this.currentPath_ = oldPath;
-  };
-
-  contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
-    var oldPath = this.currentPath_;
-    this.beginPath();
-
-    this.moveTo(aX, aY);
-    this.lineTo(aX + aWidth, aY);
-    this.lineTo(aX + aWidth, aY + aHeight);
-    this.lineTo(aX, aY + aHeight);
-    this.closePath();
-    this.fill();
-
-    this.currentPath_ = oldPath;
-  };
-
-  contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
-    var gradient = new CanvasGradient_('gradient');
-    gradient.x0_ = aX0;
-    gradient.y0_ = aY0;
-    gradient.x1_ = aX1;
-    gradient.y1_ = aY1;
-    return gradient;
-  };
-
-  contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
-                                                   aX1, aY1, aR1) {
-    var gradient = new CanvasGradient_('gradientradial');
-    gradient.x0_ = aX0;
-    gradient.y0_ = aY0;
-    gradient.r0_ = aR0;
-    gradient.x1_ = aX1;
-    gradient.y1_ = aY1;
-    gradient.r1_ = aR1;
-    return gradient;
-  };
-
-  contextPrototype.drawImage = function(image, var_args) {
-    var dx, dy, dw, dh, sx, sy, sw, sh;
-
-    // to find the original width we overide the width and height
-    var oldRuntimeWidth = image.runtimeStyle.width;
-    var oldRuntimeHeight = image.runtimeStyle.height;
-    image.runtimeStyle.width = 'auto';
-    image.runtimeStyle.height = 'auto';
-
-    // get the original size
-    var w = image.width;
-    var h = image.height;
-
-    // and remove overides
-    image.runtimeStyle.width = oldRuntimeWidth;
-    image.runtimeStyle.height = oldRuntimeHeight;
-
-    if (arguments.length == 3) {
-      dx = arguments[1];
-      dy = arguments[2];
-      sx = sy = 0;
-      sw = dw = w;
-      sh = dh = h;
-    } else if (arguments.length == 5) {
-      dx = arguments[1];
-      dy = arguments[2];
-      dw = arguments[3];
-      dh = arguments[4];
-      sx = sy = 0;
-      sw = w;
-      sh = h;
-    } else if (arguments.length == 9) {
-      sx = arguments[1];
-      sy = arguments[2];
-      sw = arguments[3];
-      sh = arguments[4];
-      dx = arguments[5];
-      dy = arguments[6];
-      dw = arguments[7];
-      dh = arguments[8];
-    } else {
-      throw Error('Invalid number of arguments');
-    }
-
-    var d = this.getCoords_(dx, dy);
-
-    var w2 = sw / 2;
-    var h2 = sh / 2;
-
-    var vmlStr = [];
-
-    var W = 10;
-    var H = 10;
-
-    // For some reason that I've now forgotten, using divs didn't work
-    vmlStr.push(' <g_vml_:group',
-                ' coordsize="', Z * W, ',', Z * H, '"',
-                ' coordorigin="0,0"' ,
-                ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
-
-    // If filters are necessary (rotation exists), create them
-    // filters are bog-slow, so only create them if abbsolutely necessary
-    // The following check doesn't account for skews (which don't exist
-    // in the canvas spec (yet) anyway.
-
-    if (this.m_[0][0] != 1 || this.m_[0][1]) {
-      var filter = [];
-
-      // Note the 12/21 reversal
-      filter.push('M11=', this.m_[0][0], ',',
-                  'M12=', this.m_[1][0], ',',
-                  'M21=', this.m_[0][1], ',',
-                  'M22=', this.m_[1][1], ',',
-                  'Dx=', mr(d.x / Z), ',',
-                  'Dy=', mr(d.y / Z), '');
-
-      // Bounding box calculation (need to minimize displayed area so that
-      // filters don't waste time on unused pixels.
-      var max = d;
-      var c2 = this.getCoords_(dx + dw, dy);
-      var c3 = this.getCoords_(dx, dy + dh);
-      var c4 = this.getCoords_(dx + dw, dy + dh);
-
-      max.x = m.max(max.x, c2.x, c3.x, c4.x);
-      max.y = m.max(max.y, c2.y, c3.y, c4.y);
-
-      vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
-                  'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
-                  filter.join(''), ", sizingmethod='clip');")
-    } else {
-      vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
-    }
-
-    vmlStr.push(' ">' ,
-                '<g_vml_:image src="', image.src, '"',
-                ' style="width:', Z * dw, 'px;',
-                ' height:', Z * dh, 'px;"',
-                ' cropleft="', sx / w, '"',
-                ' croptop="', sy / h, '"',
-                ' cropright="', (w - sx - sw) / w, '"',
-                ' cropbottom="', (h - sy - sh) / h, '"',
-                ' />',
-                '</g_vml_:group>');
-
-    this.element_.insertAdjacentHTML('BeforeEnd',
-                                    vmlStr.join(''));
-  };
-
-  contextPrototype.stroke = function(aFill) {
-    var lineStr = [];
-    var lineOpen = false;
-    var a = processStyle(aFill ? this.fillStyle : this.strokeStyle);
-    var color = a.color;
-    var opacity = a.alpha * this.globalAlpha;
-
-    var W = 10;
-    var H = 10;
-
-    lineStr.push('<g_vml_:shape',
-                 ' filled="', !!aFill, '"',
-                 ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
-                 ' coordorigin="0 0" coordsize="', Z * W, ' ', Z * H, '"',
-                 ' stroked="', !aFill, '"',
-                 ' path="');
-
-    var newSeq = false;
-    var min = {x: null, y: null};
-    var max = {x: null, y: null};
-
-    for (var i = 0; i < this.currentPath_.length; i++) {
-      var p = this.currentPath_[i];
-      var c;
-
-      switch (p.type) {
-        case 'moveTo':
-          c = p;
-          lineStr.push(' m ', mr(p.x), ',', mr(p.y));
-          break;
-        case 'lineTo':
-          lineStr.push(' l ', mr(p.x), ',', mr(p.y));
-          break;
-        case 'close':
-          lineStr.push(' x ');
-          p = null;
-          break;
-        case 'bezierCurveTo':
-          lineStr.push(' c ',
-                       mr(p.cp1x), ',', mr(p.cp1y), ',',
-                       mr(p.cp2x), ',', mr(p.cp2y), ',',
-                       mr(p.x), ',', mr(p.y));
-          break;
-        case 'at':
-        case 'wa':
-          lineStr.push(' ', p.type, ' ',
-                       mr(p.x - this.arcScaleX_ * p.radius), ',',
-                       mr(p.y - this.arcScaleY_ * p.radius), ' ',
-                       mr(p.x + this.arcScaleX_ * p.radius), ',',
-                       mr(p.y + this.arcScaleY_ * p.radius), ' ',
-                       mr(p.xStart), ',', mr(p.yStart), ' ',
-                       mr(p.xEnd), ',', mr(p.yEnd));
-          break;
-      }
-
-
-      // TODO: Following is broken for curves due to
-      //       move to proper paths.
-
-      // Figure out dimensions so we can do gradient fills
-      // properly
-      if (p) {
-        if (min.x == null || p.x < min.x) {
-          min.x = p.x;
-        }
-        if (max.x == null || p.x > max.x) {
-          max.x = p.x;
-        }
-        if (min.y == null || p.y < min.y) {
-          min.y = p.y;
-        }
-        if (max.y == null || p.y > max.y) {
-          max.y = p.y;
-        }
-      }
-    }
-    lineStr.push(' ">');
-
-    if (!aFill) {
-      var lineWidth = this.lineScale_ * this.lineWidth;
-
-      // VML cannot correctly render a line if the width is less than 1px.
-      // In that case, we dilute the color to make the line look thinner.
-      if (lineWidth < 1) {
-        opacity *= lineWidth;
-      }
-
-      lineStr.push(
-        '<g_vml_:stroke',
-        ' opacity="', opacity, '"',
-        ' joinstyle="', this.lineJoin, '"',
-        ' miterlimit="', this.miterLimit, '"',
-        ' endcap="', processLineCap(this.lineCap), '"',
-        ' weight="', lineWidth, 'px"',
-        ' color="', color, '" />'
-      );
-    } else if (typeof this.fillStyle == 'object') {
-      var fillStyle = this.fillStyle;
-      var angle = 0;
-      var focus = {x: 0, y: 0};
-
-      // additional offset
-      var shift = 0;
-      // scale factor for offset
-      var expansion = 1;
-
-      if (fillStyle.type_ == 'gradient') {
-        var x0 = fillStyle.x0_ / this.arcScaleX_;
-        var y0 = fillStyle.y0_ / this.arcScaleY_;
-        var x1 = fillStyle.x1_ / this.arcScaleX_;
-        var y1 = fillStyle.y1_ / this.arcScaleY_;
-        var p0 = this.getCoords_(x0, y0);
-        var p1 = this.getCoords_(x1, y1);
-        var dx = p1.x - p0.x;
-        var dy = p1.y - p0.y;
-        angle = Math.atan2(dx, dy) * 180 / Math.PI;
-
-        // The angle should be a non-negative number.
-        if (angle < 0) {
-          angle += 360;
-        }
-
-        // Very small angles produce an unexpected result because they are
-        // converted to a scientific notation string.
-        if (angle < 1e-6) {
-          angle = 0;
-        }
-      } else {
-        var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_);
-        var width  = max.x - min.x;
-        var height = max.y - min.y;
-        focus = {
-          x: (p0.x - min.x) / width,
-          y: (p0.y - min.y) / height
-        };
-
-        width  /= this.arcScaleX_ * Z;
-        height /= this.arcScaleY_ * Z;
-        var dimension = m.max(width, height);
-        shift = 2 * fillStyle.r0_ / dimension;
-        expansion = 2 * fillStyle.r1_ / dimension - shift;
-      }
-
-      // We need to sort the color stops in ascending order by offset,
-      // otherwise IE won't interpret it correctly.
-      var stops = fillStyle.colors_;
-      stops.sort(function(cs1, cs2) {
-        return cs1.offset - cs2.offset;
-      });
-
-      var length = stops.length;
-      var color1 = stops[0].color;
-      var color2 = stops[length - 1].color;
-      var opacity1 = stops[0].alpha * this.globalAlpha;
-      var opacity2 = stops[length - 1].alpha * this.globalAlpha;
-
-      var colors = [];
-      for (var i = 0; i < length; i++) {
-        var stop = stops[i];
-        colors.push(stop.offset * expansion + shift + ' ' + stop.color);
-      }
-
-      // When colors attribute is used, the meanings of opacity and o:opacity2
-      // are reversed.
-      lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
-                   ' method="none" focus="100%"',
-                   ' color="', color1, '"',
-                   ' color2="', color2, '"',
-                   ' colors="', colors.join(','), '"',
-                   ' opacity="', opacity2, '"',
-                   ' g_o_:opacity2="', opacity1, '"',
-                   ' angle="', angle, '"',
-                   ' focusposition="', focus.x, ',', focus.y, '" />');
-    } else {
-      lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
-                   '" />');
-    }
-
-    lineStr.push('</g_vml_:shape>');
-
-    this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
-  };
-
-  contextPrototype.fill = function() {
-    this.stroke(true);
-  }
-
-  contextPrototype.closePath = function() {
-    this.currentPath_.push({type: 'close'});
-  };
-
-  /**
-   * @private
-   */
-  contextPrototype.getCoords_ = function(aX, aY) {
-    var m = this.m_;
-    return {
-      x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
-      y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
-    }
-  };
-
-  contextPrototype.save = function() {
-    var o = {};
-    copyState(this, o);
-    this.aStack_.push(o);
-    this.mStack_.push(this.m_);
-    this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
-  };
-
-  contextPrototype.restore = function() {
-    copyState(this.aStack_.pop(), this);
-    this.m_ = this.mStack_.pop();
-  };
-
-  function matrixIsFinite(m) {
-    for (var j = 0; j < 3; j++) {
-      for (var k = 0; k < 2; k++) {
-        if (!isFinite(m[j][k]) || isNaN(m[j][k])) {
-          return false;
-        }
-      }
-    }
-    return true;
-  }
-
-  function setM(ctx, m, updateLineScale) {
-    if (!matrixIsFinite(m)) {
-      return;
-    }
-    ctx.m_ = m;
-
-    if (updateLineScale) {
-      // Get the line scale.
-      // Determinant of this.m_ means how much the area is enlarged by the
-      // transformation. So its square root can be used as a scale factor
-      // for width.
-      var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
-      ctx.lineScale_ = sqrt(abs(det));
-    }
-  }
-
-  contextPrototype.translate = function(aX, aY) {
-    var m1 = [
-      [1,  0,  0],
-      [0,  1,  0],
-      [aX, aY, 1]
-    ];
-
-    setM(this, matrixMultiply(m1, this.m_), false);
-  };
-
-  contextPrototype.rotate = function(aRot) {
-    var c = mc(aRot);
-    var s = ms(aRot);
-
-    var m1 = [
-      [c,  s, 0],
-      [-s, c, 0],
-      [0,  0, 1]
-    ];
-
-    setM(this, matrixMultiply(m1, this.m_), false);
-  };
-
-  contextPrototype.scale = function(aX, aY) {
-    this.arcScaleX_ *= aX;
-    this.arcScaleY_ *= aY;
-    var m1 = [
-      [aX, 0,  0],
-      [0,  aY, 0],
-      [0,  0,  1]
-    ];
-
-    setM(this, matrixMultiply(m1, this.m_), true);
-  };
-
-  contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
-    var m1 = [
-      [m11, m12, 0],
-      [m21, m22, 0],
-      [dx,  dy,  1]
-    ];
-
-    setM(this, matrixMultiply(m1, this.m_), true);
-  };
-
-  contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
-    var m = [
-      [m11, m12, 0],
-      [m21, m22, 0],
-      [dx,  dy,  1]
-    ];
-
-    setM(this, m, true);
-  };
-
-  /******** STUBS ********/
-  contextPrototype.clip = function() {
-    // TODO: Implement
-  };
-
-  contextPrototype.arcTo = function() {
-    // TODO: Implement
-  };
-
-  contextPrototype.createPattern = function() {
-    return new CanvasPattern_;
-  };
-
-  // Gradient / Pattern Stubs
-  function CanvasGradient_(aType) {
-    this.type_ = aType;
-    this.x0_ = 0;
-    this.y0_ = 0;
-    this.r0_ = 0;
-    this.x1_ = 0;
-    this.y1_ = 0;
-    this.r1_ = 0;
-    this.colors_ = [];
-  }
-
-  CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
-    aColor = processStyle(aColor);
-    this.colors_.push({offset: aOffset,
-                       color: aColor.color,
-                       alpha: aColor.alpha});
-  };
-
-  function CanvasPattern_() {}
-
-  // set up externs
-  G_vmlCanvasManager = G_vmlCanvasManager_;
-  CanvasRenderingContext2D = CanvasRenderingContext2D_;
-  CanvasGradient = CanvasGradient_;
-  CanvasPattern = CanvasPattern_;
-
-})();
-
-} // if
diff --git a/web_widget_digitized_signature/static/lib/jSignature/jSignatureCustom.js b/web_widget_digitized_signature/static/lib/jSignature/jSignatureCustom.js
new file mode 100644
index 00000000..ae51103d
--- /dev/null
+++ b/web_widget_digitized_signature/static/lib/jSignature/jSignatureCustom.js
@@ -0,0 +1,1457 @@
+/** @preserve 
+jSignature v2 "${buildDate}" "${commitID}"
+Copyright (c) 2012 Willow Systems Corp http://willow-systems.com
+Copyright (c) 2010 Brinley Ang http://www.unbolt.net
+MIT License <http://www.opensource.org/licenses/mit-license.php> 
+
+*/
+;(function() {
+
+var apinamespace = 'jSignature'
+
+/**
+Allows one to delay certain eventual action by setting up a timer for it and allowing one to delay it
+by "kick"ing it. Sorta like "kick the can down the road"
+
+@public
+@class
+@param
+@returns {Type}
+*/
+var KickTimerClass = function(time, callback) {
+    var timer;
+    this.kick = function() {
+        clearTimeout(timer);
+        timer = setTimeout(
+            callback
+            , time
+        );
+    }
+    this.clear = function() {
+        clearTimeout(timer);
+    }
+    return this;
+}
+
+var PubSubClass = function(context){
+    'use strict'
+    /*  @preserve 
+    -----------------------------------------------------------------------------------------------
+    JavaScript PubSub library
+    2012 (c) Willow Systems Corp (www.willow-systems.com)
+    based on Peter Higgins (dante@dojotoolkit.org)
+    Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly.
+    Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see:
+    http://dojofoundation.org/license for more information.
+    -----------------------------------------------------------------------------------------------
+    */
+    this.topics = {};
+    // here we choose what will be "this" for the called events.
+    // if context is defined, it's context. Else, 'this' is this instance of PubSub
+    this.context = context ? context : this;
+    /**
+     * Allows caller to emit an event and pass arguments to event listeners.
+     * @public
+     * @function
+     * @param topic {String} Name of the channel on which to voice this event
+     * @param **arguments Any number of arguments you want to pass to the listeners of this event.
+     */
+    this.publish = function(topic, arg1, arg2, etc) {
+        'use strict'
+        if (this.topics[topic]) {
+            var currentTopic = this.topics[topic]
+            , args = Array.prototype.slice.call(arguments, 1)
+            , toremove = []
+            , torun = []
+            , fn
+            , i, l
+            , pair;
+
+            for (i = 0, l = currentTopic.length; i < l; i++) {
+                pair = currentTopic[i]; // this is a [function, once_flag] array
+                fn = pair[0];
+                if (pair[1] /* 'run once' flag set */){
+                  pair[0] = function(){};
+                  toremove.push(i);
+                }
+                /* don't call the callback right now, it might decide to add or
+                 * remove subscribers which will wreak havoc on our index-based
+                 * iteration */
+                torun.push(fn);
+            }
+            for (i = 0, l = toremove.length; i < l; i++) {
+              currentTopic.splice(toremove[i], 1);
+            }
+            for (i = 0, l = torun.length; i < l; i++) {
+              torun[i].apply(this.context, args);
+            }
+        }
+    }
+    /**
+     * Allows listener code to subscribe to channel and be called when data is available 
+     * @public
+     * @function
+     * @param topic {String} Name of the channel on which to voice this event
+     * @param callback {Function} Executable (function pointer) that will be ran when event is voiced on this channel.
+     * @param once {Boolean} (optional. False by default) Flag indicating if the function is to be triggered only once.
+     * @returns {Object} A token object that cen be used for unsubscribing.  
+     */
+    this.subscribe = function(topic, callback, once) {
+        'use strict'
+        if (!this.topics[topic]) {
+            this.topics[topic] = [[callback, once]];
+        } else {
+            this.topics[topic].push([callback,once]);
+        }
+        return {
+            "topic": topic,
+            "callback": callback
+        };
+    };
+    /**
+     * Allows listener code to unsubscribe from a channel 
+     * @public
+     * @function
+     * @param token {Object} A token object that was returned by `subscribe` method 
+     */
+    this.unsubscribe = function(token) {
+        if (this.topics[token.topic]) {
+            var currentTopic = this.topics[token.topic];
+            
+            for (var i = 0, l = currentTopic.length; i < l; i++) {
+                if (currentTopic[i] && currentTopic[i][0] === token.callback) {
+                    currentTopic.splice(i, 1);
+                }
+            }
+        }
+    }
+}
+
+/// Returns front, back and "decor" colors derived from element (as jQuery obj)
+function getColors($e){
+    var tmp
+    , undef
+    , frontcolor = $e.css('color')
+    , backcolor
+    , e = $e[0];
+    
+    var toOfDOM = false;
+    while(e && !backcolor && !toOfDOM){
+        try{
+            tmp = $(e).css('background-color');
+        } catch (ex) {
+            tmp = 'transparent';
+        }
+        if (tmp !== 'transparent' && tmp !== 'rgba(0, 0, 0, 0)'){
+            backcolor = tmp;
+        }
+        toOfDOM = e.body;
+        e = e.parentNode;
+    }
+
+    var rgbaregex = /rgb[a]*\((\d+),\s*(\d+),\s*(\d+)/ // modern browsers
+    , hexregex = /#([AaBbCcDdEeFf\d]{2})([AaBbCcDdEeFf\d]{2})([AaBbCcDdEeFf\d]{2})/ // IE 8 and less.
+    , frontcolorcomponents;
+
+    // Decomposing Front color into R, G, B ints
+    tmp = undef;
+    tmp = frontcolor.match(rgbaregex);
+    if (tmp){
+        frontcolorcomponents = {'r':parseInt(tmp[1],10),'g':parseInt(tmp[2],10),'b':parseInt(tmp[3],10)};
+    } else {
+        tmp = frontcolor.match(hexregex);
+        if (tmp) {
+            frontcolorcomponents = {'r':parseInt(tmp[1],16),'g':parseInt(tmp[2],16),'b':parseInt(tmp[3],16)};
+        }
+    }
+//      if(!frontcolorcomponents){
+//          frontcolorcomponents = {'r':255,'g':255,'b':255}
+//      }
+
+    var backcolorcomponents
+    // Decomposing back color into R, G, B ints
+    if(!backcolor){
+        // HIghly unlikely since this means that no background styling was applied to any element from here to top of dom.
+        // we'll pick up back color from front color
+        if(frontcolorcomponents){
+            if (Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b]) > 127){
+                backcolorcomponents = {'r':0,'g':0,'b':0};
+            } else {
+                backcolorcomponents = {'r':255,'g':255,'b':255};
+            }
+        } else {
+            // arg!!! front color is in format we don't understand (hsl, named colors)
+            // Let's just go with white background.
+            backcolorcomponents = {'r':255,'g':255,'b':255};
+        }
+    } else {
+        tmp = undef;
+        tmp = backcolor.match(rgbaregex);
+        if (tmp){
+            backcolorcomponents = {'r':parseInt(tmp[1],10),'g':parseInt(tmp[2],10),'b':parseInt(tmp[3],10)};
+        } else {
+            tmp = backcolor.match(hexregex);
+            if (tmp) {
+                backcolorcomponents = {'r':parseInt(tmp[1],16),'g':parseInt(tmp[2],16),'b':parseInt(tmp[3],16)};
+            }
+        }
+//          if(!backcolorcomponents){
+//              backcolorcomponents = {'r':0,'g':0,'b':0}
+//          }
+    }
+    
+    // Deriving Decor color
+    // THis is LAZY!!!! Better way would be to use HSL and adjust luminocity. However, that could be an overkill. 
+    
+    var toRGBfn = function(o){return 'rgb(' + [o.r, o.g, o.b].join(', ') + ')'} 
+    , decorcolorcomponents
+    , frontcolorbrightness
+    , adjusted;
+    
+    if (frontcolorcomponents && backcolorcomponents){
+        var backcolorbrightness = Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b]);
+        
+        frontcolorbrightness = Math.max.apply(null, [backcolorcomponents.r, backcolorcomponents.g, backcolorcomponents.b]);
+        adjusted = Math.round(frontcolorbrightness + (-1 * (frontcolorbrightness - backcolorbrightness) * 0.75)); // "dimming" the difference between pen and back.
+        decorcolorcomponents = {'r':adjusted,'g':adjusted,'b':adjusted}; // always shade of gray
+    } else if (frontcolorcomponents) {
+        frontcolorbrightness = Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b]);
+        var polarity = +1;
+        if (frontcolorbrightness > 127){
+            polarity = -1;
+        }
+        // shifting by 25% (64 points on RGB scale)
+        adjusted = Math.round(frontcolorbrightness + (polarity * 96)); // "dimming" the pen's color by 75% to get decor color.
+        decorcolorcomponents = {'r':adjusted,'g':adjusted,'b':adjusted}; // always shade of gray
+    } else {
+        decorcolorcomponents = {'r':191,'g':191,'b':191}; // always shade of gray
+    }
+
+    return {
+        'color': frontcolor
+        , 'background-color': backcolorcomponents? toRGBfn(backcolorcomponents) : backcolor
+        , 'decor-color': toRGBfn(decorcolorcomponents)
+    };
+}
+
+function Vector(x,y){
+    this.x = x;
+    this.y = y;
+    this.reverse = function(){
+        return new this.constructor( 
+            this.x * -1
+            , this.y * -1
+        );
+    };
+    this._length = null;
+    this.getLength = function(){
+        if (!this._length){
+            this._length = Math.sqrt( Math.pow(this.x, 2) + Math.pow(this.y, 2) );
+        }
+        return this._length;
+    };
+    
+    var polarity = function (e){
+        return Math.round(e / Math.abs(e));
+    };
+    this.resizeTo = function(length){
+        // proportionally changes x,y such that the hypotenuse (vector length) is = new length
+        if (this.x === 0 && this.y === 0){
+            this._length = 0;
+        } else if (this.x === 0){
+            this._length = length;
+            this.y = length * polarity(this.y);
+        } else if(this.y === 0){
+            this._length = length;
+            this.x = length * polarity(this.x);
+        } else {
+            var proportion = Math.abs(this.y / this.x)
+                , x = Math.sqrt(Math.pow(length, 2) / (1 + Math.pow(proportion, 2)))
+                , y = proportion * x;
+            this._length = length;
+            this.x = x * polarity(this.x);
+            this.y = y * polarity(this.y);
+        }
+        return this;
+    };
+    
+    /**
+     * Calculates the angle between 'this' vector and another.
+     * @public
+     * @function
+     * @returns {Number} The angle between the two vectors as measured in PI. 
+     */
+    this.angleTo = function(vectorB) {
+        var divisor = this.getLength() * vectorB.getLength();
+        if (divisor === 0) {
+            return 0;
+        } else {
+            // JavaScript floating point math is screwed up.
+            // because of it, the core of the formula can, on occasion, have values
+            // over 1.0 and below -1.0.
+            return Math.acos(
+                Math.min( 
+                    Math.max( 
+                        ( this.x * vectorB.x + this.y * vectorB.y ) / divisor
+                        , -1.0
+                    )
+                    , 1.0
+                )
+            ) / Math.PI;
+        }
+    };
+}
+
+function Point(x,y){
+    this.x = x;
+    this.y = y;
+    
+    this.getVectorToCoordinates = function (x, y) {
+        return new Vector(x - this.x, y - this.y);
+    };
+    this.getVectorFromCoordinates = function (x, y) {
+        return this.getVectorToCoordinates(x, y).reverse();
+    };
+    this.getVectorToPoint = function (point) {
+        return new Vector(point.x - this.x, point.y - this.y);
+    };
+    this.getVectorFromPoint = function (point) {
+        return this.getVectorToPoint(point).reverse();
+    };
+}
+
+/*
+ * About data structure:
+ * We don't store / deal with "pictures" this signature capture code captures "vectors"
+ * 
+ * We don't store bitmaps. We store "strokes" as arrays of arrays. (Actually, arrays of objects containing arrays of coordinates.
+ * 
+ * Stroke = mousedown + mousemoved * n (+ mouseup but we don't record that as that was the "end / lack of movement" indicator)
+ * 
+ * Vectors = not classical vectors where numbers indicated shift relative last position. Our vectors are actually coordinates against top left of canvas.
+ *          we could calc the classical vectors, but keeping the the actual coordinates allows us (through Math.max / min) 
+ *          to calc the size of resulting drawing very quickly. If we want classical vectors later, we can always get them in backend code.
+ * 
+ * So, the data structure:
+ * 
+ * var data = [
+ *  { // stroke starts
+ *      x : [101, 98, 57, 43] // x points
+ *      , y : [1, 23, 65, 87] // y points
+ *  } // stroke ends
+ *  , { // stroke starts
+ *      x : [55, 56, 57, 58] // x points
+ *      , y : [101, 97, 54, 4] // y points
+ *  } // stroke ends
+ *  , { // stroke consisting of just a dot
+ *      x : [53] // x points
+ *      , y : [151] // y points
+ *  } // stroke ends
+ * ]
+ * 
+ * we don't care or store stroke width (it's canvas-size-relative), color, shadow values. These can be added / changed on whim post-capture.
+ * 
+ */
+function DataEngine(storageObject, context, startStrokeFn, addToStrokeFn, endStrokeFn){
+    this.data = storageObject; // we expect this to be an instance of Array
+    this.context = context;
+
+    if (storageObject.length){
+        // we have data to render
+        var numofstrokes = storageObject.length
+        , stroke
+        , numofpoints;
+        
+        for (var i = 0; i < numofstrokes; i++){
+            stroke = storageObject[i];
+            numofpoints = stroke.x.length;
+            startStrokeFn.call(context, stroke);
+            for(var j = 1; j < numofpoints; j++){
+                addToStrokeFn.call(context, stroke, j);
+            }
+            endStrokeFn.call(context, stroke);
+        }
+    }
+
+    this.changed = function(){};
+    
+    this.startStrokeFn = startStrokeFn;
+    this.addToStrokeFn = addToStrokeFn;
+    this.endStrokeFn = endStrokeFn;
+
+    this.inStroke = false;
+    
+    this._lastPoint = null;
+    this._stroke = null;
+    this.startStroke = function(point){
+        if(point && typeof(point.x) == "number" && typeof(point.y) == "number"){
+            this._stroke = {'x':[point.x], 'y':[point.y]};
+            this.data.push(this._stroke);
+            this._lastPoint = point;
+            this.inStroke = true;
+            // 'this' does not work same inside setTimeout(
+            var stroke = this._stroke 
+            , fn = this.startStrokeFn
+            , context = this.context;
+            setTimeout(
+                // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
+                function() {fn.call(context, stroke)}
+                , 3
+            );
+            return point;
+        } else {
+            return null;
+        }
+    };
+    // that "5" at the very end of this if is important to explain.
+    // we do NOT render links between two captured points (in the middle of the stroke) if the distance is shorter than that number.
+    // not only do we NOT render it, we also do NOT capture (add) these intermediate points to storage.
+    // when clustering of these is too tight, it produces noise on the line, which, because of smoothing, makes lines too curvy.
+    // maybe, later, we can expose this as a configurable setting of some sort.
+    this.addToStroke = function(point){
+        if (this.inStroke && 
+            typeof(point.x) === "number" && 
+            typeof(point.y) === "number" &&
+            // calculates absolute shift in diagonal pixels away from original point
+            (Math.abs(point.x - this._lastPoint.x) + Math.abs(point.y - this._lastPoint.y)) > 4
+        ){
+            var positionInStroke = this._stroke.x.length;
+            this._stroke.x.push(point.x);
+            this._stroke.y.push(point.y);
+            this._lastPoint = point;
+            
+            var stroke = this._stroke
+            , fn = this.addToStrokeFn
+            , context = this.context;
+            setTimeout(
+                // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
+                function() {fn.call(context, stroke, positionInStroke)}
+                , 3
+            );
+            return point;
+        } else {
+            return null;
+        }
+    };
+    this.endStroke = function(){
+        var c = this.inStroke;
+        this.inStroke = false;
+        this._lastPoint = null;
+        if (c){
+            var stroke = this._stroke
+            , fn = this.endStrokeFn // 'this' does not work same inside setTimeout(
+            , context = this.context
+            , changedfn = this.changed;
+            setTimeout(
+                // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
+                function(){
+                    fn.call(context, stroke);
+                    changedfn.call(context);
+                }
+                , 3
+            );
+            return true;
+        } else {
+            return null;
+        }
+    };
+}
+
+var basicDot = function(ctx, x, y, size){
+    var fillStyle = ctx.fillStyle;
+    ctx.fillStyle = ctx.strokeStyle;
+    ctx.fillRect(x + size / -2 , y + size / -2, size, size);
+    ctx.fillStyle = fillStyle;
+}
+, basicLine = function(ctx, startx, starty, endx, endy){
+    ctx.beginPath();
+    ctx.moveTo(startx, starty);
+    ctx.lineTo(endx, endy);
+    ctx.closePath();
+    ctx.stroke();
+}
+, basicCurve = function(ctx, startx, starty, endx, endy, cp1x, cp1y, cp2x, cp2y){
+    ctx.beginPath();
+    ctx.moveTo(startx, starty);
+    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endx, endy);
+    ctx.closePath();
+    ctx.stroke();
+}
+, strokeStartCallback = function(stroke) {
+    // this = jSignatureClass instance
+    basicDot(this.canvasContext, stroke.x[0], stroke.y[0], this.settings.lineWidth);
+}
+, strokeAddCallback = function(stroke, positionInStroke){
+    // this = jSignatureClass instance
+
+    // Because we are funky this way, here we draw TWO curves.
+    // 1. POSSIBLY "this line" - spanning from point right before us, to this latest point.
+    // 2. POSSIBLY "prior curve" - spanning from "latest point" to the one before it.
+    
+    // Why you ask?
+    // long lines (ones with many pixels between them) do not look good when they are part of a large curvy stroke.
+    // You know, the jaggedy crocodile spine instead of a pretty, smooth curve. Yuck!
+    // We want to approximate pretty curves in-place of those ugly lines.
+    // To approximate a very nice curve we need to know the direction of line before and after.
+    // Hence, on long lines we actually wait for another point beyond it to come back from
+    // mousemoved before we draw this curve.
+    
+    // So for "prior curve" to be calc'ed we need 4 points 
+    //  A, B, C, D (we are on D now, A is 3 points in the past.)
+    // and 3 lines:
+    //  pre-line (from points A to B), 
+    //  this line (from points B to C), (we call it "this" because if it was not yet, it's the only one we can draw for sure.) 
+    //  post-line (from points C to D) (even through D point is 'current' we don't know how we can draw it yet)
+    //
+    // Well, actually, we don't need to *know* the point A, just the vector A->B
+    var Cpoint = new Point(stroke.x[positionInStroke-1], stroke.y[positionInStroke-1])
+        , Dpoint = new Point(stroke.x[positionInStroke], stroke.y[positionInStroke])
+        , CDvector = Cpoint.getVectorToPoint(Dpoint);
+        
+    // Again, we have a chance here to draw TWO things:
+    //  BC Curve (only if it's long, because if it was short, it was drawn by previous callback) and 
+    //  CD Line (only if it's short)
+    
+    // So, let's start with BC curve.
+    // if there is only 2 points in stroke array, we don't have "history" long enough to have point B, let alone point A.
+    // Falling through to drawing line CD is proper, as that's the only line we have points for.
+    if(positionInStroke > 1) {
+        // we are here when there are at least 3 points in stroke array.
+        var Bpoint = new Point(stroke.x[positionInStroke-2], stroke.y[positionInStroke-2])
+        , BCvector = Bpoint.getVectorToPoint(Cpoint)
+        , ABvector;
+        if(BCvector.getLength() > this.lineCurveThreshold){
+            // Yey! Pretty curves, here we come!
+            if(positionInStroke > 2) {
+                // we are here when at least 4 points in stroke array.
+                ABvector = (new Point(stroke.x[positionInStroke-3], stroke.y[positionInStroke-3])).getVectorToPoint(Bpoint);
+            } else {
+                ABvector = new Vector(0,0);
+            }
+
+            var minlenfraction = 0.05
+            , maxlen = BCvector.getLength() * 0.35
+            , ABCangle = BCvector.angleTo(ABvector.reverse())
+            , BCDangle = CDvector.angleTo(BCvector.reverse())
+            , BCP1vector = new Vector(ABvector.x + BCvector.x, ABvector.y + BCvector.y).resizeTo(
+                Math.max(minlenfraction, ABCangle) * maxlen
+            )
+            , CCP2vector = (new Vector(BCvector.x + CDvector.x, BCvector.y + CDvector.y)).reverse().resizeTo(
+                Math.max(minlenfraction, BCDangle) * maxlen
+            );
+            
+            basicCurve(
+                this.canvasContext
+                , Bpoint.x
+                , Bpoint.y
+                , Cpoint.x
+                , Cpoint.y
+                , Bpoint.x + BCP1vector.x
+                , Bpoint.y + BCP1vector.y
+                , Cpoint.x + CCP2vector.x
+                , Cpoint.y + CCP2vector.y
+            );
+        }
+    }
+    if(CDvector.getLength() <= this.lineCurveThreshold){
+        basicLine(
+            this.canvasContext
+            , Cpoint.x
+            , Cpoint.y
+            , Dpoint.x
+            , Dpoint.y
+        );
+    }
+}
+, strokeEndCallback = function(stroke){
+    // this = jSignatureClass instance
+
+    // Here we tidy up things left unfinished in last strokeAddCallback run.
+
+    // What's POTENTIALLY left unfinished there is the curve between the last points
+    // in the stroke, if the len of that line is more than lineCurveThreshold
+    // If the last line was shorter than lineCurveThreshold, it was drawn there, and there
+    // is nothing for us here to do.
+    // We can also be called when there is only one point in the stroke (meaning, the 
+    // stroke was just a dot), in which case, again, there is nothing for us to do.
+                
+    // So for "this curve" to be calc'ed we need 3 points 
+    //  A, B, C
+    // and 2 lines:
+    //  pre-line (from points A to B), 
+    //  this line (from points B to C) 
+    // Well, actually, we don't need to *know* the point A, just the vector A->B
+    // so, we really need points B, C and AB vector.
+    var positionInStroke = stroke.x.length - 1;
+    
+    if (positionInStroke > 0){
+        // there are at least 2 points in the stroke.we are in business.
+        var Cpoint = new Point(stroke.x[positionInStroke], stroke.y[positionInStroke])
+            , Bpoint = new Point(stroke.x[positionInStroke-1], stroke.y[positionInStroke-1])
+            , BCvector = Bpoint.getVectorToPoint(Cpoint)
+            , ABvector;
+        if (BCvector.getLength() > this.lineCurveThreshold){
+            // yep. This one was left undrawn in prior callback. Have to draw it now.
+            if (positionInStroke > 1){
+                // we have at least 3 elems in stroke
+                ABvector = (new Point(stroke.x[positionInStroke-2], stroke.y[positionInStroke-2])).getVectorToPoint(Bpoint);
+                var BCP1vector = new Vector(ABvector.x + BCvector.x, ABvector.y + BCvector.y).resizeTo(BCvector.getLength() / 2);
+                basicCurve(
+                    this.canvasContext
+                    , Bpoint.x
+                    , Bpoint.y
+                    , Cpoint.x
+                    , Cpoint.y
+                    , Bpoint.x + BCP1vector.x
+                    , Bpoint.y + BCP1vector.y
+                    , Cpoint.x
+                    , Cpoint.y
+                );
+            } else {
+                // Since there is no AB leg, there is no curve to draw. This line is still "long" but no curve.
+                basicLine(
+                    this.canvasContext
+                    , Bpoint.x
+                    , Bpoint.y
+                    , Cpoint.x
+                    , Cpoint.y
+                );
+            }
+        }
+    }
+}
+
+
+/*
+var getDataStats = function(){
+    var strokecnt = strokes.length
+        , stroke
+        , pointid
+        , pointcnt
+        , x, y
+        , maxX = Number.NEGATIVE_INFINITY
+        , maxY = Number.NEGATIVE_INFINITY
+        , minX = Number.POSITIVE_INFINITY
+        , minY = Number.POSITIVE_INFINITY
+    for(strokeid = 0; strokeid < strokecnt; strokeid++){
+        stroke = strokes[strokeid]
+        pointcnt = stroke.length
+        for(pointid = 0; pointid < pointcnt; pointid++){
+            x = stroke.x[pointid]
+            y = stroke.y[pointid]
+            if (x > maxX){
+                maxX = x
+            } else if (x < minX) {
+                minX = x
+            }
+            if (y > maxY){
+                maxY = y
+            } else if (y < minY) {
+                minY = y
+            }
+        }
+    }
+    return {'maxX': maxX, 'minX': minX, 'maxY': maxY, 'minY': minY}
+}
+*/
+
+function conditionallyLinkCanvasResizeToWindowResize(jSignatureInstance, settingsWidth, apinamespace, globalEvents){
+    'use strict'
+    if ( settingsWidth === 'ratio' || settingsWidth.split('')[settingsWidth.length - 1] === '%' ) {
+        
+        this.eventTokens[apinamespace + '.parentresized'] = globalEvents.subscribe(
+            apinamespace + '.parentresized'
+            , (function(eventTokens, $parent, originalParentWidth, sizeRatio){
+                'use strict'
+
+                return function(){
+                    'use strict'
+
+                    var w = $parent.width();
+                    if (w !== originalParentWidth) {
+                    
+                        // UNsubscribing this particular instance of signature pad only.
+                        // there is a separate `eventTokens` per each instance of signature pad 
+                        for (var key in eventTokens){
+                            if (eventTokens.hasOwnProperty(key)) {
+                                globalEvents.unsubscribe(eventTokens[key]);
+                                delete eventTokens[key];
+                            }
+                        }
+
+                        var settings = jSignatureInstance.settings;
+                        jSignatureInstance.$parent.children().remove();
+                        for (var key in jSignatureInstance){
+                            if (jSignatureInstance.hasOwnProperty(key)) {
+                                delete jSignatureInstance[key];
+                            }
+                        }
+                        
+                        // scale data to new signature pad size
+                        settings.data = (function(data, scale){
+                            var newData = [];
+                            var o, i, l, j, m, stroke;
+                            for ( i = 0, l = data.length; i < l; i++) {
+                                stroke = data[i];
+                                
+                                o = {'x':[],'y':[]};
+                                
+                                for ( j = 0, m = stroke.x.length; j < m; j++) {
+                                    o.x.push(stroke.x[j] * scale);
+                                    o.y.push(stroke.y[j] * scale);
+                                }
+                            
+                                newData.push(o);
+                            }
+                            return newData;
+                        })(
+                            settings.data
+                            , w * 1.0 / originalParentWidth
+                        )
+                        
+                        $parent[apinamespace](settings);
+                    }
+                }
+            })(
+                this.eventTokens
+                , this.$parent
+                , this.$parent.width()
+                , this.canvas.width * 1.0 / this.canvas.height
+            )
+        )
+    }
+};
+
+
+function jSignatureClass(parent, options, instanceExtensions) {
+
+    var $parent = this.$parent = $(parent)
+    , eventTokens = this.eventTokens = {}
+    , events = this.events = new PubSubClass(this)
+    , globalEvents = $.fn[apinamespace]('globalEvents')
+    , settings = {
+        'width' : 'ratio'
+        ,'height' : 'ratio'
+        ,'sizeRatio': 4 // only used when height = 'ratio'
+        ,'color' : '#000'
+        ,'background-color': '#fff'
+        ,'decor-color': '#eee'
+        ,'lineWidth' : 0
+        ,'minFatFingerCompensation' : -10
+        ,'showUndoButton': false
+        ,'readOnly': false
+        ,'data': []
+    };
+    
+    $.extend(settings, getColors($parent));
+    if (options) {
+        $.extend(settings, options);
+    }
+    this.settings = settings;
+
+    for (var extensionName in instanceExtensions){
+        if (instanceExtensions.hasOwnProperty(extensionName)) {
+            instanceExtensions[extensionName].call(this, extensionName);
+        }
+    }
+
+    this.events.publish(apinamespace+'.initializing');
+
+    // these, when enabled, will hover above the sig area. Hence we append them to DOM before canvas.
+    this.$controlbarUpper = (function(){
+        var controlbarstyle = 'padding:0 !important; margin:0 !important;'+
+            'width: 100% !important; height: 0 !important; -ms-touch-action: none;'+
+            'margin-top:-1em !important; margin-bottom:1em !important;';
+        return $('<div style="'+controlbarstyle+'"></div>').appendTo($parent);
+    })();
+
+    this.isCanvasEmulator = false; // will be flipped by initializer when needed.
+    var canvas = this.canvas = this.initializeCanvas(settings)
+    , $canvas = $(canvas);
+
+    this.$controlbarLower = (function(){
+        var controlbarstyle = 'padding:0 !important; margin:0 !important;'+
+            'width: 100% !important; height: 0 !important; -ms-touch-action: none;'+
+            'margin-top:-1.5em !important; margin-bottom:1.5em !important; position: relative;';
+        return $('<div style="'+controlbarstyle+'"></div>').appendTo($parent);
+    })();
+
+    this.canvasContext = canvas.getContext("2d");
+
+    // Most of our exposed API will be looking for this:
+    $canvas.data(apinamespace + '.this', this);
+
+    settings.lineWidth = (function(defaultLineWidth, canvasWidth){
+        if (!defaultLineWidth){
+            return Math.max(
+                Math.round(canvasWidth / 400) /*+1 pixel for every extra 300px of width.*/
+                , 2 /* minimum line width */
+            );
+        } else {
+            return defaultLineWidth;
+        }
+    })(settings.lineWidth, canvas.width);
+
+    this.lineCurveThreshold = settings.lineWidth * 3;
+
+    // Add custom class if defined
+    if(settings.cssclass && $.trim(settings.cssclass) != "") {
+        $canvas.addClass(settings.cssclass);
+    }
+
+    // used for shifting the drawing point up on touch devices, so one can see the drawing above the finger.
+    this.fatFingerCompensation = 0;
+
+    var movementHandlers = (function(jSignatureInstance) {
+
+        //================================
+        // mouse down, move, up handlers:
+
+        // shifts - adjustment values in viewport pixels drived from position of canvas on the page
+        var shiftX
+        , shiftY
+        , setStartValues = function(){
+            var tos = $(jSignatureInstance.canvas).offset()
+            shiftX = tos.left * -1
+            shiftY = tos.top * -1
+        }
+        , getPointFromEvent = function(e) {
+            var firstEvent = (e.changedTouches && e.changedTouches.length > 0 ? e.changedTouches[0] : e);
+            // All devices i tried report correct coordinates in pageX,Y
+            // Android Chrome 2.3.x, 3.1, 3.2., Opera Mobile,  safari iOS 4.x,
+            // Windows: Chrome, FF, IE9, Safari
+            // None of that scroll shift calc vs screenXY other sigs do is needed.
+            // ... oh, yeah, the "fatFinger.." is for tablets so that people see what they draw.
+            return new Point(
+                Math.round(firstEvent.pageX + shiftX)
+                , Math.round(firstEvent.pageY + shiftY) + jSignatureInstance.fatFingerCompensation
+            );
+        }
+        , timer = new KickTimerClass(
+            750
+            , function() { jSignatureInstance.dataEngine.endStroke(); }
+        );
+
+        this.drawEndHandler = function(e) {
+            if (!jSignatureInstance.settings.readOnly) {
+                try { e.preventDefault(); } catch (ex) {}
+                timer.clear();
+                jSignatureInstance.dataEngine.endStroke();
+            }
+        };
+        this.drawStartHandler = function(e) {
+            if (!jSignatureInstance.settings.readOnly) {
+                e.preventDefault();
+                // for performance we cache the offsets
+                // we recalc these only at the beginning the stroke         
+                setStartValues();
+                jSignatureInstance.dataEngine.startStroke( getPointFromEvent(e) );
+                timer.kick();
+            }
+        };
+        this.drawMoveHandler = function(e) {
+            if (!jSignatureInstance.settings.readOnly) {
+                e.preventDefault();
+                if (!jSignatureInstance.dataEngine.inStroke){
+                    return;
+                } 
+                jSignatureInstance.dataEngine.addToStroke( getPointFromEvent(e) );
+                timer.kick();
+            }
+        };
+
+        return this;
+
+    }).call( {}, this )
+
+    //
+    //================================
+
+    ;(function(drawEndHandler, drawStartHandler, drawMoveHandler) {
+        var canvas = this.canvas
+        , $canvas = $(canvas)
+        , undef;
+        if (this.isCanvasEmulator){
+            $canvas.bind('mousemove.'+apinamespace, drawMoveHandler);
+            $canvas.bind('mouseup.'+apinamespace, drawEndHandler);
+            $canvas.bind('mousedown.'+apinamespace, drawStartHandler);
+        } else {
+            canvas.ontouchstart = function(e) {
+                canvas.onmousedown = canvas.onmouseup = canvas.onmousemove = undef;
+
+                this.fatFingerCompensation = (
+                    settings.minFatFingerCompensation && 
+                    settings.lineWidth * -3 > settings.minFatFingerCompensation
+                ) ? settings.lineWidth * -3 : settings.minFatFingerCompensation;
+
+                drawStartHandler(e);
+
+                canvas.ontouchend = drawEndHandler;
+                canvas.ontouchstart = drawStartHandler;
+                canvas.ontouchmove = drawMoveHandler;
+            };
+            canvas.onmousedown = function(e) {
+                canvas.ontouchstart = canvas.ontouchend = canvas.ontouchmove = undef;
+
+                drawStartHandler(e);
+
+                canvas.onmousedown = drawStartHandler;
+                canvas.onmouseup = drawEndHandler;
+                canvas.onmousemove = drawMoveHandler;
+            }
+            if (window.navigator.msPointerEnabled) {
+                canvas.onmspointerdown = drawStartHandler;
+                canvas.onmspointerup = drawEndHandler;
+                canvas.onmspointermove = drawMoveHandler;
+            }
+        }
+    }).call( 
+        this
+        , movementHandlers.drawEndHandler
+        , movementHandlers.drawStartHandler
+        , movementHandlers.drawMoveHandler
+    )
+
+    //=========================================
+    // various event handlers
+
+    // on mouseout + mouseup canvas did not know that mouseUP fired. Continued to draw despite mouse UP.
+    // it is bettr than
+    // $canvas.bind('mouseout', drawEndHandler)
+    // because we don't want to break the stroke where user accidentally gets ouside and wants to get back in quickly.
+    eventTokens[apinamespace + '.windowmouseup'] = globalEvents.subscribe(
+        apinamespace + '.windowmouseup'
+        , movementHandlers.drawEndHandler
+    );
+
+    this.events.publish(apinamespace+'.attachingEventHandlers');
+
+    // If we have proportional width, we sign up to events broadcasting "window resized" and checking if
+    // parent's width changed. If so, we (1) extract settings + data from current signature pad,
+    // (2) remove signature pad from parent, and (3) reinit new signature pad at new size with same settings, (rescaled) data.
+    conditionallyLinkCanvasResizeToWindowResize.call(
+        this
+        , this
+        , settings.width.toString(10)
+        , apinamespace, globalEvents
+    );
+    
+    // end of event handlers.
+    // ===============================
+
+    this.resetCanvas(settings.data);
+
+    // resetCanvas renders the data on the screen and fires ONE "change" event
+    // if there is data. If you have controls that rely on "change" firing
+    // attach them to something that runs before this.resetCanvas, like
+    // apinamespace+'.attachingEventHandlers' that fires a bit higher.
+    this.events.publish(apinamespace+'.initialized');
+
+    return this;
+} // end of initBase
+
+//=========================================================================
+// jSignatureClass's methods and supporting fn's
+
+jSignatureClass.prototype.resetCanvas = function(data, dontClear){
+    var canvas = this.canvas
+    , settings = this.settings
+    , ctx = this.canvasContext
+    , isCanvasEmulator = this.isCanvasEmulator
+    , cw = canvas.width
+    , ch = canvas.height;
+    
+    // preparing colors, drawing area
+    if (!dontClear){
+        ctx.clearRect(0, 0, cw + 30, ch + 30);
+    }
+
+    ctx.shadowColor = ctx.fillStyle = settings['background-color']
+    if (isCanvasEmulator){
+        // FLashCanvas fills with Black by default, covering up the parent div's background
+        // hence we refill 
+        ctx.fillRect(0,0,cw + 30, ch + 30);
+    }
+
+    ctx.lineWidth = Math.ceil(parseInt(settings.lineWidth, 10));
+    ctx.lineCap = ctx.lineJoin = "round";
+    
+    // signature line
+    if (null != settings['decor-color']) {
+        ctx.strokeStyle = settings['decor-color'];
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        var lineoffset = Math.round( ch / 5 );
+        basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset);
+    }
+    ctx.strokeStyle = settings.color;
+
+    if (!isCanvasEmulator){
+        ctx.shadowColor = ctx.strokeStyle;
+        ctx.shadowOffsetX = ctx.lineWidth * 0.5;
+        ctx.shadowOffsetY = ctx.lineWidth * -0.6;
+        ctx.shadowBlur = 0;
+    }
+    
+    // setting up new dataEngine
+
+    if (!data) { data = []; }
+    
+    var dataEngine = this.dataEngine = new DataEngine(
+        data
+        , this
+        , strokeStartCallback
+        , strokeAddCallback
+        , strokeEndCallback
+    );
+
+    settings.data = data; // onwindowresize handler uses it, i think.
+    $(canvas).data(apinamespace+'.data', data)
+        .data(apinamespace+'.settings', settings);
+
+    // we fire "change" event on every change in data.
+    // setting this up:
+    dataEngine.changed = (function(target, events, apinamespace) {
+        'use strict'
+        return function() {
+            events.publish(apinamespace+'.change');
+            target.trigger('change');
+        }
+    })(this.$parent, this.events, apinamespace);
+    // let's trigger change on all data reloads
+    dataEngine.changed();
+
+    // import filters will be passing this back as indication of "we rendered"
+    return true;
+};
+
+function initializeCanvasEmulator(canvas){
+    if (canvas.getContext){
+        return false;
+    } else {
+        // for cases when jSignature, FlashCanvas is inserted
+        // from one window into another (child iframe)
+        // 'window' and 'FlashCanvas' may be stuck behind
+        // in that other parent window.
+        // we need to find it
+        var window = canvas.ownerDocument.parentWindow;
+        var FC = window.FlashCanvas ?
+            canvas.ownerDocument.parentWindow.FlashCanvas :
+            (
+                typeof FlashCanvas === "undefined" ?
+                undefined :
+                FlashCanvas
+            );
+
+        if (FC) {
+            canvas = FC.initElement(canvas);
+            
+            var zoom = 1;
+            // FlashCanvas uses flash which has this annoying habit of NOT scaling with page zoom. 
+            // It matches pixel-to-pixel to screen instead.
+            // Since we are targeting ONLY IE 7, 8 with FlashCanvas, we will test the zoom only the IE8, IE7 way
+            if (window && window.screen && window.screen.deviceXDPI && window.screen.logicalXDPI){
+                zoom = window.screen.deviceXDPI * 1.0 / window.screen.logicalXDPI;
+            }
+            if (zoom !== 1){
+                try {
+                    // We effectively abuse the brokenness of FlashCanvas and force the flash rendering surface to
+                    // occupy larger pixel dimensions than the wrapping, scaled up DIV and Canvas elems.
+                    $(canvas).children('object').get(0).resize(Math.ceil(canvas.width * zoom), Math.ceil(canvas.height * zoom));
+                    // And by applying "scale" transformation we can talk "browser pixels" to FlashCanvas
+                    // and have it translate the "browser pixels" to "screen pixels"
+                    canvas.getContext('2d').scale(zoom, zoom);
+                    // Note to self: don't reuse Canvas element. Repeated "scale" are cumulative.
+                } catch (ex) {}
+            }
+            return true;
+        } else {
+            throw new Error("Canvas element does not support 2d context. jSignature cannot proceed.");
+        }
+    }
+
+}
+
+jSignatureClass.prototype.initializeCanvas = function(settings) {
+    // ===========
+    // Init + Sizing code
+
+    var canvas = document.createElement('canvas')
+    , $canvas = $(canvas);
+
+    // We cannot work with circular dependency
+    if (settings.width === settings.height && settings.height === 'ratio') {
+        settings.width = '100%';
+    }
+
+    $canvas.css(
+        'margin'
+        , 0
+    ).css(
+        'padding'
+        , 0
+    ).css(
+        'border'
+        , 'none'
+    ).css(
+        'height'
+        , settings.height === 'ratio' || !settings.height ? 1 : settings.height.toString(10)
+    ).css(
+        'width'
+        , settings.width === 'ratio' || !settings.width ? 1 : settings.width.toString(10)
+    ).css(
+        '-ms-touch-action'
+        , 'none'
+    ).css(
+        'background-color',
+        settings['background-color']
+    );
+
+    $canvas.appendTo(this.$parent);
+
+    // we could not do this until canvas is rendered (appended to DOM)
+    if (settings.height === 'ratio') {
+        $canvas.css(
+            'height'
+            , Math.round( $canvas.width() / settings.sizeRatio )
+        );
+    } else if (settings.width === 'ratio') {
+        $canvas.css(
+            'width'
+            , Math.round( $canvas.height() * settings.sizeRatio )
+        );
+    }
+
+    $canvas.addClass(apinamespace);
+
+    // canvas's drawing area resolution is independent from canvas's size.
+    // pixels are just scaled up or down when internal resolution does not
+    // match external size. So...
+
+    canvas.width = $canvas.width();
+    canvas.height = $canvas.height();
+    
+    // Special case Sizing code
+
+    this.isCanvasEmulator = initializeCanvasEmulator(canvas);
+
+    // End of Sizing Code
+    // ===========
+
+    // normally select preventer would be short, but
+    // Canvas emulator on IE does NOT provide value for Event. Hence this convoluted line.
+    canvas.onselectstart = function(e){if(e && e.preventDefault){e.preventDefault()}; if(e && e.stopPropagation){e.stopPropagation()}; return false;};
+
+    return canvas;
+}
+
+
+var GlobalJSignatureObjectInitializer = function(window){
+
+    var globalEvents = new PubSubClass();
+    
+    // common "window resized" event listener.
+    // jSignature instances will subscribe to this chanel.
+    // to resize themselves when needed.
+    ;(function(globalEvents, apinamespace, $, window){
+        'use strict'
+
+        var resizetimer
+        , runner = function(){
+            globalEvents.publish(
+                apinamespace + '.parentresized'
+            )
+        };
+
+        // jSignature knows how to resize its content when its parent is resized
+        // window resize is the only way we can catch resize events though...
+        $(window).bind('resize.'+apinamespace, function(){
+            if (resizetimer) {
+                clearTimeout(resizetimer);
+            }
+            resizetimer = setTimeout( 
+                runner
+                , 500
+            );
+        })
+        // when mouse exists canvas element and "up"s outside, we cannot catch it with
+        // callbacks attached to canvas. This catches it outside.
+        .bind('mouseup.'+apinamespace, function(e){
+            globalEvents.publish(
+                apinamespace + '.windowmouseup'
+            )
+        });
+
+    })(globalEvents, apinamespace, $, window)
+
+    var jSignatureInstanceExtensions = {
+        /*
+        'exampleExtension':function(extensionName){
+            // we are called very early in instance's life.
+            // right after the settings are resolved and 
+            // jSignatureInstance.events is created 
+            // and right before first ("jSignature.initializing") event is called.
+            // You don't really need to manupilate 
+            // jSignatureInstance directly, just attach
+            // a bunch of events to jSignatureInstance.events
+            // (look at the source of jSignatureClass to see when these fire)
+            // and your special pieces of code will attach by themselves.
+
+            // this function runs every time a new instance is set up.
+            // this means every var you create will live only for one instance
+            // unless you attach it to something outside, like "window."
+            // and pick it up later from there.
+
+            // when globalEvents' events fire, 'this' is globalEvents object
+            // when jSignatureInstance's events fire, 'this' is jSignatureInstance
+
+            // Here,
+            // this = is new jSignatureClass's instance.
+
+            // The way you COULD approch setting this up is:
+            // if you have multistep set up, attach event to "jSignature.initializing"
+            // that attaches other events to be fired further lower the init stream.
+            // Or, if you know for sure you rely on only one jSignatureInstance's event,
+            // just attach to it directly
+
+            this.events.subscribe(
+                // name of the event
+                apinamespace + '.initializing'
+                // event handlers, can pass args too, but in majority of cases,
+                // 'this' which is jSignatureClass object instance pointer is enough to get by.
+                , function(){
+                    if (this.settings.hasOwnProperty('non-existent setting category?')) {
+                        console.log(extensionName + ' is here')
+                    }
+                }
+            )
+        }
+        */
+    };
+
+    var exportplugins = {
+        'default':function(data){return this.toDataURL()}
+        , 'native':function(data){return data}
+        , 'image':function(data){
+            /*this = canvas elem */
+            var imagestring = this.toDataURL();
+            
+            if (typeof imagestring === 'string' && 
+                imagestring.length > 4 && 
+                imagestring.slice(0,5) === 'data:' &&
+                imagestring.indexOf(',') !== -1){
+                
+                var splitterpos = imagestring.indexOf(',');
+
+                return [
+                    imagestring.slice(5, splitterpos)
+                    , imagestring.substr(splitterpos + 1)
+                ];
+            }
+            return [];
+        }
+    };
+
+    // will be part of "importplugins"
+    function _renderImageOnCanvas( data, formattype, rerendercallable ) {
+        'use strict'
+        // #1. Do NOT rely on this. No worky on IE 
+        //   (url max len + lack of base64 decoder + possibly other issues)
+        // #2. This does NOT affect what is captured as "signature" as far as vector data is 
+        // concerned. This is treated same as "signature line" - i.e. completely ignored
+        // the only time you see imported image data exported is if you export as image.
+
+        // we do NOT call rerendercallable here (unlike in other import plugins)
+        // because importing image does absolutely nothing to the underlying vector data storage
+        // This could be a way to "import" old signatures stored as images
+        // This could also be a way to import extra decor into signature area.
+        
+        var img = new Image()
+        // this = Canvas DOM elem. Not jQuery object. Not Canvas's parent div.
+        , c = this;
+
+        img.onload = function () {
+            var ctx = c.getContext("2d");
+            var oldShadowColor = ctx.shadowColor;
+            ctx.shadowColor = "transparent";
+            ctx.drawImage( 
+                img, 0, 0
+                , ( img.width < c.width) ? img.width : c.width
+                , ( img.height < c.height) ? img.height : c.height
+            );
+            ctx.shadowColor = oldShadowColor;
+        };
+
+        img.src = 'data:' + formattype + ',' + data;
+    }
+
+    var importplugins = {
+        'native':function(data, formattype, rerendercallable){
+            // we expect data as Array of objects of arrays here - whatever 'default' EXPORT plugin spits out.
+            // returning Truthy to indicate we are good, all updated.
+            rerendercallable( data );
+        }
+        , 'image': _renderImageOnCanvas
+        , 'image/png;base64': _renderImageOnCanvas
+        , 'image/jpeg;base64': _renderImageOnCanvas
+        , 'image/jpg;base64': _renderImageOnCanvas
+    };
+
+    function _clearDrawingArea( data, dontClear ) {
+        this.find('canvas.'+apinamespace)
+            .add(this.filter('canvas.'+apinamespace))
+            .data(apinamespace+'.this').resetCanvas( data, dontClear );
+        return this;
+    }
+
+    function _setDrawingData( data, formattype ) {
+        var undef;
+
+        if (formattype === undef && typeof data === 'string' && data.substr(0,5) === 'data:') {
+            formattype = data.slice(5).split(',')[0];
+            // 5 chars of "data:" + mimetype len + 1 "," char = all skipped.
+            data = data.slice(6 + formattype.length);
+            if (formattype === data) {
+                return;
+            }
+        }
+
+        var $canvas = this.find('canvas.'+apinamespace).add(this.filter('canvas.'+apinamespace));
+
+        if (!importplugins.hasOwnProperty(formattype)) {
+            throw new Error(apinamespace + " is unable to find import plugin with for format '"+ String(formattype) +"'");
+        } else if ($canvas.length !== 0) {
+            importplugins[formattype].call(
+                $canvas[0]
+                , data
+                , formattype
+                , (function(jSignatureInstance){ 
+                    return function(){ return jSignatureInstance.resetCanvas.apply(jSignatureInstance, arguments) }
+                })($canvas.data(apinamespace+'.this'))
+            );
+        }
+
+        return this;
+    }
+
+    var elementIsOrphan = function(e){
+        var topOfDOM = false;
+        e = e.parentNode;
+        while (e && !topOfDOM){
+            topOfDOM = e.body;
+            e = e.parentNode;
+        }
+        return !topOfDOM;
+    }
+
+    //These are exposed as methods under $obj.jSignature('methodname', *args)
+    var plugins = {'export':exportplugins, 'import':importplugins, 'instance': jSignatureInstanceExtensions}
+    , methods = {
+        'init' : function( options ) {
+            return this.each( function() {
+                if (!elementIsOrphan(this)) {
+                    new jSignatureClass(this, options, jSignatureInstanceExtensions);
+                }
+            })
+        }
+        , 'getSettings' : function() {
+            return this.find('canvas.'+apinamespace)
+                .add(this.filter('canvas.'+apinamespace))
+                .data(apinamespace+'.this').settings;
+        }
+        , 'isModified' : function() {
+            return this.find('canvas.'+apinamespace)
+                .add(this.filter('canvas.'+apinamespace))
+                .data(apinamespace+'.this')
+                .dataEngine
+                ._stroke !== null;
+        }
+        , 'updateSetting' : function(param, val, forFuture) {
+            var $canvas = this.find('canvas.'+apinamespace)
+                            .add(this.filter('canvas.'+apinamespace))
+                            .data(apinamespace+'.this');
+            $canvas.settings[param] = val;
+            $canvas.resetCanvas(( forFuture ? null : $canvas.settings.data ), true);
+            return $canvas.settings[param];
+        }
+        // around since v1
+        , 'clear' : _clearDrawingArea
+        // was mistakenly introduced instead of 'clear' in v2
+        , 'reset' : _clearDrawingArea
+        , 'addPlugin' : function(pluginType, pluginName, callable){
+            if (plugins.hasOwnProperty(pluginType)){
+                plugins[pluginType][pluginName] = callable;
+            }
+            return this;
+        }
+        , 'listPlugins' : function(pluginType){
+            var answer = [];
+            if (plugins.hasOwnProperty(pluginType)){
+                var o = plugins[pluginType];
+                for (var k in o){
+                    if (o.hasOwnProperty(k)){
+                        answer.push(k);
+                    }
+                }
+            }
+            return answer;
+        }
+        , 'getData' : function( formattype ) {
+            var undef, $canvas=this.find('canvas.'+apinamespace).add(this.filter('canvas.'+apinamespace));
+            if (formattype === undef) {
+                formattype = 'default';
+            }
+            if ($canvas.length !== 0 && exportplugins.hasOwnProperty(formattype)){              
+                return exportplugins[formattype].call(
+                    $canvas.get(0) // canvas dom elem
+                    , $canvas.data(apinamespace+'.data') // raw signature data as array of objects of arrays
+                    , $canvas.data(apinamespace+'.settings')
+                );
+            }
+        }
+        // around since v1. Took only one arg - data-url-formatted string with (likely png of) signature image
+        , 'importData' : _setDrawingData
+        // was mistakenly introduced instead of 'importData' in v2
+        , 'setData' : _setDrawingData
+        // this is one and same instance for all jSignature.
+        , 'globalEvents' : function(){return globalEvents}
+        , 'disable' : function() {
+            this.find("input").attr("disabled", 1);
+            this.find('canvas.'+apinamespace)
+                .addClass("disabled")
+                .data(apinamespace+'.this')
+                .settings
+                .readOnly=true;
+        }
+        , 'enable' : function() {
+            this.find("input").removeAttr("disabled");
+            this.find('canvas.'+apinamespace)
+                .removeClass("disabled")
+                .data(apinamespace+'.this')
+                .settings
+                .readOnly=false;
+        }
+        // there will be a separate one for each jSignature instance.
+        , 'events' : function() {
+            return this.find('canvas.'+apinamespace)
+                    .add(this.filter('canvas.'+apinamespace))
+                    .data(apinamespace+'.this').events;
+        }
+    } // end of methods declaration.
+    
+    $.fn[apinamespace] = function(method) {
+        'use strict'
+        if ( !method || typeof method === 'object' ) {
+            return methods.init.apply( this, arguments );
+        } else if ( typeof method === 'string' && methods[method] ) {
+            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
+        } else {
+            $.error( 'Method ' +  String(method) + ' does not exist on jQuery.' + apinamespace );
+        }
+    }
+
+} // end of GlobalJSignatureObjectInitializer
+
+GlobalJSignatureObjectInitializer(window)
+
+})();
diff --git a/web_widget_digitized_signature/static/lib/jquery.signature.js b/web_widget_digitized_signature/static/lib/jquery.signature.js
deleted file mode 100644
index 5d8be9e0..00000000
--- a/web_widget_digitized_signature/static/lib/jquery.signature.js
+++ /dev/null
@@ -1,246 +0,0 @@
-
-(function($) { // Hide scope, no $ conflict
-
-var signatureOverrides = {
-
-	// Global defaults for signature
-	options: {
-		background: '#ffffff', // Colour of the background
-		color: '#000000', // Colour of the signature
-		thickness: 2, // Thickness of the lines
-		guideline: false, // Add a guide line or not?
-		guidelineColor: '#a0a0a0', // 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
-        width: 170,
-        height: 50
-	},
-
-	/* Initialise a new signature area. */
-	_create: function() {
-	
-		  
-		this.element.addClass(this.widgetFullName || this.widgetBaseClass);
-		try {
-			this.canvas = $('<canvas width="' + this.options.width + '" height="' +
-				this.options.height + '">' + '' + '</canvas>')[0];
-		 	this.element.prepend(this.canvas);
-		 	this.element.find('img').remove();
-			this.ctx = this.canvas.getContext('2d');
-		}
-		catch (e) {
-			$(this.canvas).remove();
-			this.resize = true;
-			this.canvas = document.createElement('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();
-		}
-	},
-
-	/* 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();
-	},
-
-	/* Determine if dragging can start.
-	   @param  event  (Event) the triggering mouse event
-	   @return  (boolean) true if allowed, false if not */
-	_mouseCapture: function(event) {
-		return !this.options.disabled;
-	},
-
-	/* Start a new line.
-	   @param  event  (Event) the triggering mouse event */
-	_mouseStart: function(event) {
-		this.offset = this.element.offset();
-		this.offset.left -= document.documentElement.scrollLeft || document.body.scrollLeft;
-		this.offset.top -= document.documentElement.scrollTop || document.body.scrollTop;
-		this.lastPoint = [this._round(event.clientX - this.offset.left),
-			this._round(event.clientY - this.offset.top)];
-		this.curLine = [this.lastPoint];
-		this.lines.push(this.curLine);
-	},
-
-	/* Track the mouse.
-	   @param  event  (Event) the triggering mouse event */
-	_mouseDrag: function(event) {
-		var point = [this._round(event.clientX - this.offset.left),
-			this._round(event.clientY - this.offset.top)];
-		this.curLine.push(point);
-		this.ctx.beginPath();
-		this.ctx.moveTo(this.lastPoint[0], this.lastPoint[1]);
-		this.ctx.lineTo(point[0], point[1]);
-		this.ctx.stroke();
-		this.lastPoint = point;
-	},
-
-	/* End a line.
-	   @param  event  (Event) the triggering mouse event */
-	_mouseStop: function(event) {
-		this.lastPoint = null;
-		this.curLine = null;
-		this._changed(event);
-	},
-
-	/* Round to two decimal points.
-	   @param  value  (number) the value to round
-	   @return  (number) the rounded value */
-	_round: function(value) {
-		return Math.round(value * 100) / 100;
-	},
-
-	/* Convert the captured lines to JSON text.
-	   @return  (string) the JSON text version of the lines */
-	toJSON: function() {
-		return '{"lines":[' + $.map(this.lines, function(line) {
-			return '[' + $.map(line, function(point) {
-					return '[' + point + ']';
-				}) + ']';
-		}) + ']}';
-	},
-
-	/* Convert the captured lines to SVG text.
-	   @return  (string) the SVG text version of the lines */
-	toSVG: function() {
-		return '<?xml version="1.0"?>\n<!DOCTYPE svg PUBLIC ' +
-			'"-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
-			'<svg xmlns="http://www.w3.org/2000/svg" width="15cm" height="15cm">\n' +
-			'	<g fill="' + this.options.background + '">\n' +
-			'		<rect x="0" y="0" width="' + this.canvas.width +
-			'" height="' + this.canvas.height + '"/>\n' +
-			'		<g fill="none" stroke="' + this.options.color + '" stroke-width="' +
-			this.options.thickness + '">\n'+
-			$.map(this.lines, function(line) {
-				return '			<polyline points="' +
-					$.map(line, function(point) { return point + ''; }).join(' ') + '"/>\n';
-			}).join('') +
-			'		</g>\n	</g>\n</svg>\n';
-	},
-
-	/* Draw a signature from its JSON description.
-	   @param  sigJSON  (object) object with attribute lines
-	                    being an array of arrays of points or
-	                    (string) text version of the JSON */
-	draw: function(sigJSON) {
-		this.clear(true);
-		if (typeof sigJSON === 'string') {
-			sigJSON = $.parseJSON(sigJSON);
-		}
-		this.lines = sigJSON.lines || [];
-		var ctx = this.ctx;
-		$.each(this.lines, function() {
-			ctx.beginPath();
-			$.each(this, function(i) {
-				ctx[i === 0 ? 'moveTo' : 'lineTo'](this[0], this[1]);
-			});
-			ctx.stroke();
-		});
-		this._changed();
-	},
-
-	/* Determine whether or not any drawing has occurred.
-	   @return  (boolean) true if not signed, false if signed */
-	isEmpty: function() {
-		return this.lines.length === 0;
-	},
-
-	/* Remove the signature functionality. */
-	_destroy: function() {
-		this.element.removeClass(this.widgetFullName || this.widgetBaseClass);
-		$(this.canvas).remove();
-		this.canvas = this.ctx = this.lines = null;
-		this._mouseDestroy();
-	}
-};
-
-if (!$.Widget.prototype._destroy) {
-	$.extend(signatureOverrides, {
-		/* Remove the signature functionality. */
-		destroy: function() {
-			this._destroy();
-			$.Widget.prototype.destroy.call(this); // Base widget handling
-		}
-	});
-}
-
-if($.Widget.prototype._getCreateOptions === $.noop) {
-	$.extend(signatureOverrides, {
-		/* Restore the metadata functionality. */
-		_getCreateOptions: function() {
-			return $.metadata && $.metadata.get(this.element[0])[this.widgetName];
-		}
-	});
-}
-
-/* Signature capture and display.
-   Depends on jquery.ui.widget, jquery.ui.mouse. */
-$.widget('kbw.signature', $.ui.mouse, signatureOverrides);
-
-// Make some things more accessible
-$.kbw.signature.options = $.kbw.signature.prototype.options;
-
-})(jQuery);
diff --git a/web_widget_digitized_signature/static/src/css/jquery.signature.css b/web_widget_digitized_signature/static/src/css/jquery.signature.css
deleted file mode 100644
index 5952cf50..00000000
--- a/web_widget_digitized_signature/static/src/css/jquery.signature.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* Styles for signature plugin v1.1.0. */
-.kbw-signature {
-	display: inline-block;
-	border: 1px solid #a0a0a0;
-}
diff --git a/web_widget_digitized_signature/static/src/js/digital_sign.js b/web_widget_digitized_signature/static/src/js/digital_sign.js
old mode 100644
new mode 100755
index c3e70aaa..b657cf7f
--- a/web_widget_digitized_signature/static/src/js/digital_sign.js
+++ b/web_widget_digitized_signature/static/src/js/digital_sign.js
@@ -7,6 +7,35 @@ openerp.web_widget_digitized_signature = function(instance) {
     instance.web.form.widgets.add('signature', 'instance.web.form.FieldSignature');
         instance.web.form.FieldSignature = instance.web.form.FieldBinaryImage.extend({
         template: 'FieldSignature',
+        placeholder: "/web/static/src/img/placeholder.png",
+        initialize_content: function() {
+            this._super();
+            this.$el.find("#signature").empty().jSignature({'decor-color' : '#D1D0CE', 'color': '#000', 'background-color': '#fff'});
+            this.$el.find("#signature").attr({"tabindex": "0",'height':"100"});
+            this.empty_sign = this.$el.find("#signature").jSignature("getData",'image');
+            this.$el.find('#sign_clean').click(this.on_clear_sign);
+            this.$el.find('.save_sign').click(this.on_save_sign);
+        },
+        on_clear_sign: function() {
+            if (this.get('value') !== false) {
+                this.binary_value = false;
+                this.internal_set_value(false);
+            }
+            $(this.$el[0]).find(".signature > canvas").remove()
+            $(this.$el[0]).find(".signature").attr("tabindex", "0");
+            $(this.$el[0]).find(".signature").jSignature();
+            $(this.$el[0]).find(".signature").focus()
+            return false;
+        },
+        on_save_sign: function(value_) {
+            var self = this;
+            var val;
+            var signature = self.$el.find("#signature").jSignature("getData",'image');
+            var is_empty = signature ? self.empty_sign[1] == signature[1] : false;
+            if(! is_empty && signature[1]){
+                self.set('value',signature[1])
+            }
+        },
         render_value: function() {
             var self = this;
             var url;
@@ -14,16 +43,6 @@ openerp.web_widget_digitized_signature = function(instance) {
                 url = 'data:image/png;base64,' + this.get('value');
             }else if (this.get('value')) {
                 var id = JSON.stringify(this.view.datarecord.id || null);
-                self.digita_dataset = new instance.web.DataSetSearch(self, self.view.model, {}, []);
-                self.digita_dataset.read_slice(['id', self.name], {'domain': [['id', '=', id]]}).then(function(records){
-                    _.each(records,function(record){
-                        if(record[self.name]){
-                            images[self.name] = record[self.name]
-                        }else{
-                            images[self.name] = ""
-                        }
-                    })
-                })
                 var field = this.name;
                 if (this.options.preview_image)
                     field = this.options.preview_image;
@@ -33,93 +52,60 @@ openerp.web_widget_digitized_signature = function(instance) {
                           field: field,
                           t: (new Date().getTime()),
                 });
+            }else if(! this.get('value')){
+                $(this.$el[0]).find(".signature > canvas").remove();
+                var sign_options = {'decor-color' : '#D1D0CE', 'color': '#000', 'background-color': '#fff'};
+
+                if ('width' in self.node.attrs){
+                    sign_options.width = self.node.attrs.width;
+                }
+                if ('height' in self.node.attrs){
+                    sign_options.height = self.node.attrs.height;
+                }
+                this.$el.find("#signature").empty().jSignature(sign_options);
+                this.$el.find("#signature").attr({"tabindex": "0",'height':"100"});
             }else {
-                images[self.name] = ""
                 url = this.placeholder;
-                self.set('value',images[self.name])
             }
-            var $img = $(QWeb.render("FieldBinaryImage-img", { widget: this, url: url }));
-            this.$el.find('img').remove();
-            var sign_options = {};
-            if ('width' in self.node.attrs){
-                sign_options.width = self.node.attrs.width;
-            }
-            if ('height' in self.node.attrs){
-                sign_options.height = self.node.attrs.height;
-            }
-            var actual_mode = this.view.get("actual_mode");
-            if(actual_mode !== 'edit' && actual_mode !== 'create'){
+            if(this.view.get("actual_mode") == 'view'){
+                var $img = $(QWeb.render("FieldBinaryImage-img", { widget: this, url: url }));
+                this.$el.find('> img').remove();
+                this.$el.find("#signature").hide();
                 this.$el.prepend($img);
-            }else if(actual_mode == 'edit' || actual_mode == 'create'){
-                if( actual_mode == 'create'){
-                    images = {};
-                }
+                $img.load(function() {
+                    if (! self.options.size)
+                        return;
+                    $img.css("max-width", "" + self.options.size[0] + "px");
+                    $img.css("max-height", "" + self.options.size[1] + "px");
+                    $img.css("margin-left", "" + (self.options.size[0] - $img.width()) / 2 + "px");
+                    $img.css("margin-top", "" + (self.options.size[1] - $img.height()) / 2 + "px");
+                });
+                $img.on('error', function() {
+                    $img.attr('src', self.placeholder);
+                    instance.webclient.notification.warn(_t("Image"), _t("Could not display the selected image."));
+                });
+            }else if(this.view.get("actual_mode") == 'edit' || this.view.get("actual_mode") == 'create'){
                 this.$el.find('> img').remove();
-                this.$el.find('> canvas').remove();
-                if(! this.get('value')){
-                    this.$el.find('> img').remove();
-                    this.$el.find(".signature").signature(sign_options);
-                }else if(this.get('value')){
-                    this.$el.prepend($img);
-                }
-            }
-            this.$el.find('.clear_sign').click(function(){
-                self.$el.find('> img').remove();
-                images[self.name] = ""
-                self.$el.find(".signature").show();
-                self.$el.find(".signature").signature('clear');
-            });
-            $('.save_sign').click(function(){
-                var val
-                if(self.$el.find(".signature").hasClass( "kbw-signature" ) && ! self.$el.find(".signature").signature('isEmpty')){
-                    self.$el.find(".signature").hide();
-                    val = self.$el.find(".signature > canvas")[0].toDataURL();
-                    images[self.name] = val.split(',')[1]
-                    var $img = $(QWeb.render("FieldBinaryImage-signature", { widget: self, url: val }));
-                    self.$el.find('> img').remove();
-                    self.$el.prepend($img);
-                    self.set('value',val.split(',')[1])
-                    var id = JSON.stringify(self.view.datarecord.id || null);
-                    var field = self.name;
-                    url = self.session.url('/web/binary/image', {
-                        model: self.view.dataset.model,
-                        id: id,
-                        field: field,
-                        t: (new Date().getTime()),
+                if(this.get('value')){
+                    var id = JSON.stringify(this.view.datarecord.id || null);
+                    var field = this.name;
+                    if (this.options.preview_image)
+                        field = this.options.preview_image;
+                    new instance.web.Model(this.view.dataset.model).call("read", [this.view.datarecord.id, [field]]).done(function(data) {
+                        if(data){
+                            var field_desc = _.values(_.pick(data, field));
+                            $(self.$el[0]).find(".signature").jSignature('reset');
+                            $(self.$el[0]).find(".signature").jSignature("setData", 'data:image/png;base64,'+field_desc[0]);
+                        }
                     });
-                }else{
-                        var id = JSON.stringify(self.view.datarecord.id || null);
-                        var field = self.name;
-                        if (self.options.preview_image)
-                            field = self.options.preview_image;
-                        url = self.session.url('/web/binary/image', {
-                                model: self.view.dataset.model,
-                                id: id,
-                                field: field,
-                                t: (new Date().getTime()),
-                        });
-                       var $img = $(QWeb.render("FieldBinaryImage-signature", { widget: self, url: url }));
-                       self.$el.find('> img').remove();
                 }
-            });
-            $img.load(function() {
-                if (! self.options.size)
-                    return;
-                $img.css("max-width", "" + self.options.size[0] + "px");
-                $img.css("max-height", "" + self.options.size[1] + "px");
-                $img.css("margin-left", "" + (self.options.size[0] - $img.width()) / 2 + "px");
-                $img.css("margin-top", "" + (self.options.size[1] - $img.height()) / 2 + "px");
-            });
-            $img.on('error', function() {
-                $img.attr('src', self.placeholder);
-                instance.webclient.notification.warn(_t("Image"), _t("Could not display the selected image."));
-            });
+          }
         },
     });
-    instance.web.FormView.include({
-        save: function() {
-            $('.save_sign').click();
-            return this._super.apply(this, arguments);
-        },
-    })
+        instance.web.FormView.include({
+            save: function() {
+                this.$el.find('.save_sign').click();
+                return this._super.apply(this, arguments);
+            },
+        })
 }
diff --git a/web_widget_digitized_signature/static/src/xml/digital_sign.xml b/web_widget_digitized_signature/static/src/xml/digital_sign.xml
old mode 100644
new mode 100755
index 96f0e6da..bb471593
--- a/web_widget_digitized_signature/static/src/xml/digital_sign.xml
+++ b/web_widget_digitized_signature/static/src/xml/digital_sign.xml
@@ -1,18 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="FieldSignature"  >
-        <div class = "cc">
-            <div class="signature oe_edit_only"/><br/>
-            <button class="oe_form_binary_file_clear oe_edit_only clear_sign"><span>Clear</span></button>
-            <span class="oe_edit_only save_sign"></span>
+        <div class="panel panel-default mt16 mb0 " id="drawsign">
+            <div class="panel-heading oe_edit_only">
+                <div class="pull-right">
+                    <a id="sign_clean" class="btn btn-xs oe_edit_only">Clear</a>
+                    <a class="oe_edit_only save_sign"></a>
+                </div>
+                <strong>Draw your signature</strong>
+            </div>
+            <div id="signature" class="signature panel-body " style="padding: 0"/>
         </div>
     </t>
-    <t t-name="FieldBinaryImage-signature">
-    <img t-att-src='url'
-        t-att-border="widget.readonly ? 0 : 1"
-        t-att-name="widget.name"
-        t-att-width="widget.node.attrs.img_width || widget.node.attrs.width"
-        t-att-height="widget.node.attrs.img_height || widget.node.attrs.height"
-    />
+    <t t-name="FieldBinaryImage-extend">
+        <img t-att-src='url'
+            t-att-border="widget.readonly ? 0 : 1"
+            t-att-name="widget.name"
+            t-att-width="widget.node.attrs.img_width || widget.node.attrs.width"
+            t-att-height="widget.node.attrs.img_height || widget.node.attrs.height"
+        />
     </t>
 </templates>
diff --git a/web_widget_digitized_signature/views/we_digital_sign_view.xml b/web_widget_digitized_signature/views/we_digital_sign_view.xml
index 79254574..aef0163e 100644
--- a/web_widget_digitized_signature/views/we_digital_sign_view.xml
+++ b/web_widget_digitized_signature/views/we_digital_sign_view.xml
@@ -3,9 +3,7 @@
         <template id="signature_backend" name="signature assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
                 <link rel="stylesheet" href="/web_widget_digitized_signature/static/src/css/digital.css"/>
-                <link rel="stylesheet" href="/web_widget_digitized_signature/static/src/css/jquery.signature.css"/>
-                <script type="text/javascript" src="/web_widget_digitized_signature/static/lib/excanvas.js"></script>
-                <script type="text/javascript" src="/web_widget_digitized_signature/static/lib/jquery.signature.js"></script>
+                <script type="text/javascript" src="/web_widget_digitized_signature/static/lib/jSignature/jSignatureCustom.js"></script>
                 <script type="text/javascript" src="/web_widget_digitized_signature/static/src/js/digital_sign.js"></script>
             </xpath>
         </template>