Increase resolution of signature pad

David Khuu · David Khuu · commit 51870ca6a125 · 2017-04-10T15:41:23.000-06:00
Increase the resolution by doubling the canvas but containing it in the WebView and increasing the device pixel ratio to match the device. rpmsoftware#10
diff --git a/index.js b/index.js
@@ -20,6 +20,8 @@ class SignaturePad extends Component {
     style: View.propTypes.style,
     penColor: PropTypes.string,
     dataURL: PropTypes.string,
+    height: PropTypes.number,
+    width: PropTypes.number,
     penMinWidth: PropTypes.number,
     penMaxWidth: PropTypes.number,
     useFont: PropTypes.bool,
@@ -49,7 +51,9 @@ class SignaturePad extends Component {
         props.penMinWidth,
         props.penMaxWidth,
         props.useFont,
-        escapedName
+        escapedName,
+        props.height,
+        props.width
       );
     var html = htmlContent(injectedJavaScript, props.fontStyle);
     this.source = { html };
@@ -75,7 +79,9 @@ class SignaturePad extends Component {
           this.props.penMinWidth,
           this.props.penMaxWidth,
           this.props.useFont,
-          escapedName
+          escapedName,
+          this.props.height,
+          this.props.width
         );
       var html = htmlContent(injectedJavaScript, this.props.fontStyle);
       this.source = { html };
@@ -166,7 +172,6 @@ class SignaturePad extends Component {
         scrollEnabled={false}
         javaScriptEnabled={true}
         style={this.props.style}
-        scalesPageToFit={true}
       />
     );
   };
diff --git a/injectedHtml/index.js b/injectedHtml/index.js
@@ -16,14 +16,20 @@ var content = (script, fontStyle) =>
       -ms-transform:rotate(-90deg)  translate(-100%, 0px);
       -webkit-transform:rotate(-90deg)  translate(-100%, 0px);*/
     }
+
+    html, body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+    }
     </style>
 
     <style type="text/css">
       ${fontStyle}
     </style>
 
     <body>
-      <canvas style="margin-left: 0; margin-top: 0;"></canvas>
+      <div><canvas style="margin-left: 0; margin-top: 0; width: 100%; height: 100%;"></canvas></div>
       <script>
         ${script}
       </script>
diff --git a/injectedJavaScript/application.js b/injectedJavaScript/application.js
@@ -1,4 +1,4 @@
-var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name) => `
+var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name, height, width) => `
 
   var showSignaturePad = function (signaturePadCanvas, bodyWidth, bodyHeight) {
     /*We're rotating by 90% -> Flip X and Y*/
@@ -9,7 +9,7 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
     var height = bodyHeight;
 
     var sizeSignaturePad = function () {
-      var devicePixelRatio = 1; /*window.devicePixelRatio || 1;*/
+      var devicePixelRatio = window.devicePixelRatio || 1;
       var canvasWidth = width * devicePixelRatio;
       var canvasHeight = height * devicePixelRatio;
       signaturePadCanvas.width = canvasWidth;
@@ -44,13 +44,13 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
     enableSignaturePadFunctionality();
   };
 
-  var bodyWidth = document.body.clientWidth;
-  var bodyHeight = document.body.clientHeight;
+  var bodyWidth = document.body.clientWidth * 2;
+  var bodyHeight = document.body.clientHeight * 2;
   if(!bodyWidth) {
-    bodyWidth = window.innerWidth;
+    bodyWidth = window.innerWidth ? window.innerWidth : ${width};
   }
   if(!bodyHeight) {
-    bodyHeight = window.innerHeight;
+    bodyHeight = window.innerHeight ? window.innerHeight : ${height};
   }
 
   var canvasElement = document.querySelector("canvas");
@@ -65,8 +65,8 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
     var oldHeight = canvasElement.offsetHeight;
     var w = bodyWidth;
     var h = bodyHeight;
-    canvasElement.width = oldWidth;
-    canvasElement.height = oldHeight;
+    canvasElement.width = oldWidth * 2;
+    canvasElement.height = oldHeight * 2;
 
     var ratio = (bodyWidth/bodyHeight);
     var fontSize = 45 * ratio;
@@ -89,7 +89,7 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
     /* Fire a finishedStroke function to update the state */
     executeNativeFunction("finishedStroke", {base64DataUrl: canvasElement.toDataURL()});
   } else {
-    showSignaturePad(canvasElement, bodyWidth, bodyHeight);
+    showSignaturePad(canvasElement, bodyWidth / 2, bodyHeight / 2);
   }
 `;
 
