[FIX] web: the signature content is drop when the browser is resized

Step to reproduce:

1. Go to sign
2. Click on the button 'Share' inside a template.
3. Click on Sign now'
4. Click on a field signature
5. Draw a signature
6. Resize the browser

Before this commit the code of the widget drops the content when a browser is triggering a resize.

But with a mobile devices (like Android phone). A resize event is trigger when the keyboard is displayed.

=> The resize drop redraw all the widget content when the user fill the displayed input.

Task ID: 2155601

X-original-commit: a6af5a12efb0da9d8ee7526e6b4738c9595f9816

addons/web/static/src/js/widgets/name_and_signature.js

@@ -142,7 +142,7 @@ var NameAndSignature = Widget.extend({
                 // May happen since this is debounced
                 return;
             }
-            self.resetSignature();
+            self.resizeSignature();
         }, 250));
 
         return this._super.apply(this, arguments);
@@ -204,6 +204,27 @@ var NameAndSignature = Widget.extend({
         var signature = this.$signatureField.jSignature('getData');
         return signature && this.emptySignature ? this.emptySignature === signature : true;
     },
+    resizeSignature: function() {
+        if (!this.$signatureField) {
+            return;
+        }
+        // recompute size based on the current width
+        this.$signatureField.css({width: 'unset'});
+        const width = this.$signatureField.width();
+        const height = parseInt(width / this.displaySignatureRatio);
+
+        // necessary because the lib is adding invisible div with margin
+        // signature field too tall without this code
+        this.$signatureField.css({
+            width: width,
+            height: height,
+        });
+        this.$signatureField.find('canvas').css({
+            width: width,
+            height: height,
+        });
+        return {width, height};
+    },
     /**
      * (Re)initializes the signature area:
      *  - set the correct width and height of the drawing based on the width
@@ -219,17 +240,8 @@ var NameAndSignature = Widget.extend({
             // no action if called before start
             return Promise.reject();
         }
-        // recompute size based on the current width
-        this.$signatureField.css({width: 'unset'});
-        var width = this.$signatureField.width();
-        var height = parseInt(width / this.displaySignatureRatio);
 
-        // necessary because the lib is adding invisible div with margin
-        // signature field too tall without this code
-        this.$signatureField.css({
-            width: width,
-            height: height,
-        });
+        const {width, height} = this.resizeSignature();
 
         this.$signatureField
             .empty()