Jump to content

Signature Box on Mobile : Drawing far away from the cursor


Recommended Posts

Hi, I have found documentation for the Signature Pad Library regarding resizing the signature based on the device's viewport.
https://github.com/szimek/signature_pad#handling-high-dpi-screens

Here's a discussion about it:

https://stackoverflow.com/questions/51711627/signature-pad-on-mobile-draws-a-distance-of-several-centimeters-along-the-x-and

So on Caspio, I have tried this code snippet:
 

<script type="text/javascript">
$(document).ready(function () {

  $('#caspioform').signaturePad({drawOnly : true});
 // window.addEventListener("resize", resizeCanvas);
  resizeCanvas();
 
});
$("#cb_sign_wrapper form").submit(function(){
$("#EditRecordSignature")[0].value = $("#cb_sign_wrapper .output")[0].value;
});

function resizeCanvas() {
  var canvas = document.querySelector(".pad");
  var ratio =  Math.max(window.devicePixelRatio || 1, 1);
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);

  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
}

</script>

This should adjust the signature pad on first load on mobile.

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...