How to resize angular2-signaturepad

Question

I need to dynamically change the width of signature pad. How can i do it?

<signature-pad class="signature w-50-p" id="sign_canvas" fxFlexAlign.xs="center"></signature-pad>

(angular2-signaturepad)

score 7 · Accepted Answer · answered Nov 06 '19 at 09:35

7

html:

<signature-pad fxFlex="1 1 50" (window:resize)="resizeSignaturePad()"
                         class="signature" 
                         id="sign_canvas" fxFlexAlign.xs="center"></signature-pad>

ts:

resizeSignaturePad() {
    this.signaturePad.set('canvasWidth', document.getElementById("sign_canvas").offsetWidth);
    this.signaturePad.clear();
}

answered Nov 06 '19 at 09:35

Markomar

143
1
9

1

I was having same issue, signature pad went white when resized, thanks for above, saved my day! – Hope Sep 07 '20 at 12:10
I think this answer doesn't work anymore for version 3.*. – tobias47n9e Mar 12 '21 at 17:26

score 1 · Answer 2 · answered May 01 '21 at 00:31

I implemented this on Angular 11 today. This answer builds on Markomar's answer. Hopefully this saves someone some headache. In short I had to manually set the canvas size using the queryPad() method because of some weird underscore. I used a template variable (#form) on an element I liked the size of and used AfterViewInit instead of OnInit so it initialized properly.

@ViewChild('form') formElement: ElementRef;

resizeSignature() {
    this.signature.queryPad()._canvas.width = this.formElement?.nativeElement.offsetWidth;
}

ngAfterViewInit(): void { this.resizeSignature(); }

Nice one, 3.0.4 and it was saying that cannot read width of undefined, and it was canvas that it was trying to access instead of _canvas. — Silencer, Nov 11 '21 at 14:45

score 0 · Answer 3 · answered Dec 10 '21 at 11:42

Try this

In your TS:

@ViewChild('signatureDiv') signatureDiv: ElementRef;
@HostListener('window:resize', ['$event'])
onResize(event) {
    this.handleSignatureCanvasSize(); //handle the resizing of signature pad canvas on resizing screen
}

ngAfterViewInit() {
    this.handleSignatureCanvasSize(); //handle the resizing of signature pad canvas on different screens
}

handleSignatureCanvasSize() {
    //handle the resizing of signature pad canvas on resizing screen
    const canvas = document.querySelector("canvas");
    const tempWidth = String(this.signatureDiv.nativeElement.clientWidth);
    const widthCanvas = tempWidth.concat("px");
    canvas.setAttribute("width", widthCanvas);
}

In your HTML add the reference:

                                <div class="signature-container" #signatureDiv align="center">
                                    <signature-pad [options]="signaturePadOptions" (onEndEvent)="drawComplete()">
                                    </signature-pad>
                                </div>

score -5 · Answer 4 · edited Nov 05 '19 at 07:41

-5

You can try this:

input signature ng-model="signatureOne"></input>
<input signature ng-model="signatureTwo

edited Nov 05 '19 at 07:41

Dino

7,779
12
46
85

answered Nov 04 '19 at 15:39

Dira Hammed

1
1

How to resize angular2-signaturepad

4 Answers4