Angular9 Signature Pad issue: Signature drawn offset from pen touch

Question

I implemented a signature pad using https://github.com/ramsatt/Angular9SignaturePad/tree/master/src/app/_componets/signature-pad and it works fine on smaller devices but on iPad or bigger devices like 7" upwards, it doesn't work properly. When drawing on the screen, the resulting line has an offset from where the user touched (Signature drawn doesn't appear directly under the pen as user draws). please how can I fix this.

are you resizing the pad with CSS on bigger devices/screens ? — ihor.eth, Jun 24 '21 at 21:22
@ihorbond I don't think I am doing that. How can that be achieved? — James D, Jun 25 '21 at 08:16
it's whole other can of worms. I suggest to keep the pad size the same across the screens. resizing it via css will lead to what you described because the size of the actual html canvas didnt change. you could change the canvas size but that will erase signature so it will have to be redrawn. now because you are drawing original signature on bigger canvas it will probably look distorted/blurry. — ihor.eth, Jun 25 '21 at 20:49

score 0 · Answer 1 · answered Jun 26 '21 at 09:38

So I fixed it by adding the below code and calling it in ngOnInit

resizeCanvas() {
   var width = this.signaturePadElement.nativeElement.width;
   var height = this.signaturePadElement.nativeElement.height;
   var ratio = Math.max(window.devicePixelRatio || 1, 1);
   if (ratio <= 2) {
    this.signaturePadElement.nativeElement.width = width * ratio;
    this.signaturePadElement.nativeElement.height = height * ratio;
    this.signaturePadElement.nativeElement
    .getContext("2d")
    .scale(ratio, ratio);
}

then do

 ngOnInit(){
  this.resizeCanvas()
 }

this.signaturePadElement is your Element gotten using ViewChild()

Angular9 Signature Pad issue: Signature drawn offset from pen touch

1 Answers1