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.

Here's a discussion about it:


So on Caspio, I have tried this code snippet:

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

  $('#caspioform').signaturePad({drawOnly : true});
 // window.addEventListener("resize", 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);


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.

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.

  • Create New...