Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

resizing clears the pad but isEmpty() still returns false #94

Closed
jsruok opened this issue Mar 12, 2015 · 13 comments
Closed

resizing clears the pad but isEmpty() still returns false #94

jsruok opened this issue Mar 12, 2015 · 13 comments
Labels

Comments

@jsruok
Copy link

jsruok commented Mar 12, 2015

  1. Draw on canvas
  2. Resize -> Canvas clears up
  3. isEmpty() returns false and the empty canvas can be submitted.

Can be reproduced at http://szimek.github.io/signature_pad/

Maybe SignaturePad should watch changes on canvas? That way user wouldn't be able to pass en empty signature.

@szimek szimek added the bug label Mar 12, 2015
@szimek
Copy link
Owner

szimek commented Mar 12, 2015

I'm not sure if it's possible to watch changes on canvas... maybe with MutationObserver, but that wouldn't work in IE10 and earlier. Maybe it could simply expose a function that you can call when you resize the canvas element to let the library know that something has changed? Or both - expose a function and use MutationObserver to call it automatically on supported browsers...

@jsruok
Copy link
Author

jsruok commented Mar 12, 2015

Workaround is not too difficult, though. I've added a SignaturePad.clear() call at the end of the resize routine and that pretty much solves the issue.

@szimek
Copy link
Owner

szimek commented Mar 12, 2015

I forgot that #clear already sets isEmpty to true :) Anyway, it's probably a good idea to call #clear in the demo page as well with a comment why it's there, so I'll leave it open till I have time to do it.

@jsruok
Copy link
Author

jsruok commented Mar 13, 2015

All in all, because of this and issue #32 I ended up using a helper variable, hasSignature as follows.

        signaturePad = new SignaturePad(canvas, {
            onEnd: function() {
                hasSignature = true;
            }
        });

and

clearButtonAction = function () {
    hasSignature = false;
    signaturePad.clear();
}

With that I could then proceed to mark canvas as clear, or, when a signature is present, copy-paste the signature.

        var resizeCanvas = function () {
            if (hasSignature) {
                signatureCopy = signaturePad.toDataURL();
            }

            var ratio = window.devicePixelRatio || 2;

            // Note fixed width:height ratio. No need for dynamic height.       
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = Math.floor(canvas.offsetWidth/3) * ratio; 
            canvas.getContext("2d").scale(ratio, ratio);

            // Line width is relative to canvas size to prevent different
            // width after orientation changes.
            signaturePad.minWidth = canvas.offsetWidth / 1000;
            signaturePad.maxWidth = signaturePad.minWidth * 5;

            if (hasSignature) {
                signaturePad.fromDataURL(signatureCopy);
            } else {
                // signaturePad doesn't watch canvas and needs to be told it's clear now
                signaturePad.clear(); 
            }
        }

As mentioned in #32, copy ends up a bit blurred but it's a whole lot better than losing the signature altogether.

Anyways, thanks a ton for a great piece of software, Szymon!

@razvanphp
Copy link

From my point of view, this resizing should be handled internally somehow, I mean when the page resizes, the canvas should autodraw itself.

@szimek szimek added this to the 2.0 milestone Nov 6, 2015
@Tyris
Copy link

Tyris commented Nov 26, 2015

This works a lot better if you store signatureCopy in the onEnd callback (along with the hasSignature, or better yet, use signatureCopy to determine if you have one or not by nulling it in the clear method). Since resize fires multiple times in many browsers, this stops you from ending up with a super low quality signature that's been resized multiple times.

@nivek91
Copy link

nivek91 commented Dec 21, 2015

Having the same problem: when resizing the signature is lost, can be reproduced at http://szimek.github.io/signature_pad/

@niteshkejriwal
Copy link

I ended up adding 2 lines to the resizecanvas() as below and it has worked so far smoothly in IE/FF/Chrome-

function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.

    var data = signaturePad.toDataURL(); //Added

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

    signaturePad.fromDataURL(data); //Added
}

sharkysan pushed a commit to sharkysan/angular-signature that referenced this issue May 2, 2016
@iamjoyce
Copy link

iamjoyce commented Mar 19, 2017

@niteshluharuka Do you encounter this issue whereby the signature gets blurry upon resize?

Before resize

After resize

@niteshkejriwal
Copy link

@iamjoyce no, it was a different issue of the entire canvas getting cleared. never encountered blurry issue :)

@szimek szimek modified the milestones: 2.2, 2.3 Apr 2, 2017
@shawe
Copy link

shawe commented Apr 30, 2017

Maybe this helps: #33 (comment)

@szimek szimek modified the milestones: 2.4, 2.3 Sep 2, 2017
@szimek szimek modified the milestones: 2.5, 3.0 Oct 17, 2018
@UziTech
Copy link
Collaborator

UziTech commented Nov 15, 2021

closing as stale

@UziTech UziTech closed this as completed Nov 15, 2021
@Abrarkmr
Copy link

Abrarkmr commented Jan 4, 2023

//this works for me
//this makes the pointer work perfect on all screen sizes and the canvas data is not cleared while drawing something again

        const data = signaturePad.toData();  // saves the previously drawn canvas to local variable

        // lines below makes the cursor responsive to all screen sizes
	let canvas = document.querySelector('canvas');
	signaturePad.set('minWidth', 1);
	signaturePad.set('canvasWidth', canvas.offsetWidth);
	signaturePad.set('canvasHeight', canvas.offsetHeight);

	signaturePad.fromData(data,{ clear: false });  // disallows the clearing of the canvas while drawing something again on the same canvas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

10 participants