Signature_pad: Width and Height

+1 just tried this package and having problems with sizing. Ideally I want it to span full width on mobile devices and be smaller on desktops. @szimek any ideas?

What exactly are these problems with sizing?

Take this example. When you draw the position is incorrect http://jsfiddle.net/4qjwr06h/1/

Ok i'm probably being stupid. If I want it responsive I shouldn't be doing width: 100% with <canvas> as its not changing the actual width of the canvas but stretching it instead. Should use fixed widths instead.

You can check resizeCanvas method in the demo app. If you add these 2 lines to your demo then it works fine:

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

My code also takes into account devicePixelRatio, but to be honest I'm not really sure if it's 100% correct.

I think I got it working, thanks guys

Vivat Jesus

From: Szymon Nowak [mailto:[email protected]]
Sent: Wednesday, October 7, 2015 10:14 AM
To: szimek/signature_pad [email protected]
Cc: crazzeto [email protected]
Subject: Re: [signature_pad] Width and Height (#118)

You can check https://github.com/szimek/signature_pad/blob/master/example/js/app.js#L10-L18 resizeCanvas method in the demo app. If you add these 2 lines to your demo then it works fine:

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

My code also takes into account retina displays, but to be honest I'm not really sure if it's 100% correct.

—
Reply to this email directly or view it on GitHub https://github.com/szimek/signature_pad/issues/118#issuecomment-146207233 .

May I suggest to put these lines

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

in the docs/README? It took me quite some time to figure that out, and I think that might also be true for others inexperienced with <canvas>.

@Boldewyn Thanks for the suggestion. There's a PR that should make this not necessary anymore. By the end of the year, I'll either merge it and update demo app, or add this info to the README.