Signature_pad: Canvas size responsive
Hi,
I need to create a responsive signature pad with 100% width and specific height (300px)
How can i do this?
50l3r
All 3 comments
@50l3r was you able to do that ?
@szimek any suggestions please ? :) I see a PullRequest exist for that, and is old old :)
https://github.com/szimek/signature_pad/pull/100
mihai-gritcan
on 22 Aug 2017
Afaik you can't set canvas width to a percentage, but you can place the canvas element in a container that has it's width set to 100%, then read the exact width of said parent element with jQuery. Then you can set the canvas width manually. Do this before you intialize SignaturePad.
var canvas = document.querySelector("canvas");
var parentWidth = $(canvas).parent().outerWidth();
canvas.setAttribute("width", parentWidth);
this.signaturePad = new SignaturePad(canvas);
Amsvartner
on 12 Sep 2017
Sorry for delay.
It works :)
50l3r
on 29 Apr 2018
Related issues
hostcia
·
6Comments
erangaapp
·
8Comments
Emmark
·
4Comments
kevinchung1026
·
5Comments
chitgoks
·
5Comments
Most helpful comment
Afaik you can't set canvas width to a percentage, but you can place the canvas element in a container that has it's width set to 100%, then read the exact width of said parent element with jQuery. Then you can set the canvas width manually. Do this before you intialize SignaturePad.
var canvas = document.querySelector("canvas");var parentWidth = $(canvas).parent().outerWidth();canvas.setAttribute("width", parentWidth);this.signaturePad = new SignaturePad(canvas);