Responsive Canvas area

[sajidmanzoor10p]

responsive canvas area is not generating,
I have tried
this.signaturePad.set('width', '100%'); // This sets canvas width to 0

In CSS, CSS is not working on canvas element as canvas tag is not closing.

[wulfsolter]

Please see reference implementation.

https://github.com/wulfsolter/angular2-signaturepad#reference-implementation

[sajidmanzoor10p]

Reference implementation does not cover responsive canvas area or canvas width in percentage.

[wulfsolter]

Exactly.

[Hartaxfr]

Is it possible to implement this ?

szimek/signature_pad#268 (comment)

[wulfsolter]

I don't understand the question? Probably?

[Hartaxfr]

Maybe an example will be more understandable

    -->  // FORCE to recreate signature pad 
    --> @HostListener('window:resize', ['$event'])
    -->     onResize(event) {
    -->         this.off();
    -->         this.ngAfterContentInit();
    -->         this.on();
    -->     }

  public ngAfterContentInit(): void {
    let sp: any = require('signature_pad')['default'];
    let canvas: any = this.elementRef.nativeElement.querySelector('canvas');

    if ((<any>this.options)['canvasHeight']) {
      canvas.height = (<any>this.options)['canvasHeight'];
    }
    --> // Width depend on parent width
    --> var widthOption = (<any>this.options)['canvasWidth']
    --> if (widthOption) {
    -->     if ( widthOption.indexOf('%') != -1){
    -->         canvas.width = this.elementRef.nativeElement.clientWidth * parseFloat(widthOption.substring(0, widthOption.length - 1)) / 100;
    -->     } else {
    -->         canvas.width = (<any>this.options)['canvasWidth'];
    -->     }
    --> }

    this.signaturePad = new sp(canvas, this.options);
    this.signaturePad.onBegin = this.onBegin.bind(this);
    this.signaturePad.onEnd = this.onEnd.bind(this);
  }

[Hartaxfr]

Or if set

private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
        'minWidth': 2,
        'canvasWidth': 'parent',
        'canvasHeight': 300
      };

do

canvas.width = this.elementRef.nativeElement.clientWidth

?

[wulfsolter]

I don't understand what you're trying to say @Hartaxfr .

Are you reporting a bug? Or have suggestions for extending documentation? Or you'd like to add another example reference implementation? Or you want to make a Pull Request?

[lingyilun]

try this
'canvasHeight': document.documentElement.clientHeight,

[chenlitchian]

@wulfsolter

The issue is how to make this signaturePad to have width of it parent without setting the canvasWidth?

in this example:

<div id='signpaddiv'>
  <signature-pad
    [options]="signaturePadOptions"
    (onBeginEvent)="drawStart()"
    (onEndEvent)="drawComplete()"
  ></signature-pad>
</div>

div has responsive width. how to make signaturePad occupied full width?

[angelaki]

Any news on this? Right now you always need to read the parents sizes, correct?

[wulfsolter]

https://github.com/wulfsolter/angular2-signaturepad/blob/master/README.md#no-longer-maintained