Performance

[danhi]

I'm using this to capture a signature, and from the time I click on submit, to when it is finished, can be 10 seconds. This is on a desktop, so I don't think cpu is an issue.

Is this normal and is there anything that can be done to speed this up?

Thanks

[UziTech]

Sounds like that is latency for your backend server. This should take a couple milliseconds to create the image.

[danhi]

My understanding is that this would run on the client side (in the caller's browser), but you're saying it runs on the server side? My configuration is that I have a Google form, that a Google Web App, which returns the html (with the script for signature pad), then gets the data from the signature pad for processing. So, what you're saying is that after I click the submit on the pad, the pad display showing the border cycling (I forget exactly what it looks like) until that is done, is the processing taking place on the server side?

[danhi]

Just for grins, I did an immediate return from apiSign, which is the function that gets called when submitted, and it still takes a long time (a little bizarre, after about 6 seconds it fails with a red error box with no text, not sure what that is telling me).

[yudin-s]

The signature drawing and image generation are client-side, but your full submit flow is not necessarily client-side.

signature_pad can turn the canvas into an image in a few milliseconds in normal desktop browsers. For example:

console.time("signature")
const dataUrl = signaturePad.toDataURL("image/png")
console.timeEnd("signature")

If that timing is small, the 10 seconds are coming after the signature is captured, most likely from the Google Apps Script / Web App processing or network round trip.

In a Google Apps Script setup, a typical flow is:

browser canvas
  -> toDataURL()
  -> send large base64 string to Google Web App / google.script.run
  -> server-side Apps Script processes/stores it
  -> UI spinner stops when callback returns

The spinner can make it look like the pad itself is still working, but it may simply be waiting for the server callback.

I would measure these separately:

console.time("toDataURL")
const dataUrl = signaturePad.toDataURL("image/png")
console.timeEnd("toDataURL")

console.time("submitToServer")
google.script.run
  .withSuccessHandler(() => console.timeEnd("submitToServer"))
  .withFailureHandler((err) => {
    console.timeEnd("submitToServer")
    console.error(err)
  })
  .saveSignature(dataUrl)

If toDataURL is slow, reduce the canvas size / device pixel ratio or use a smaller output format. If submitToServer is slow, the fix is on the Apps Script side: reduce image size, avoid extra Drive/Sheets calls, and return the response before doing non-critical post-processing.

So no, 10 seconds is not normal for signature capture itself. It is normal for a slow server-side Apps Script workflow if you are sending/storing a large base64 image during submit.

[danhi]

Thanks for the quick reply. I wouldn't be surprised is the Google Web App is slow, so I'll dig into it some more and see what I can figure out.

[danhi]

Yep, it turns out it's the processing I'm doing after getting the image that is the problem. Thanks for the help, and now on to performance tuning!