scaling on high dpi devices is broken

[mhjam]

Open this plunker on a device with window.devicePixelRatio > 1 (I tried Chrome browser on a Sony Z1 Compact):

http://embed.plnkr.co/YuVymgoJ9D4ohA3ipnuO/

The button "Clear and restore" accepts the signature and stores the data-url into a local variable. It then clears the pad and sets the data-url of the pad to the stored, just-read value.

Expected result: the signature should look the same. Actual result: the signature is smaller than before.

The cause of this issue is very much related to the issue #1 (which apparently was closed with neither a solution nor explanation). The directive forces the canvas width/height to be the same as its container, but it needs to be larger on high dpi devices (otherwise the onResize event handler would not make sense). Additionally it might be necessary to first resize the canvas and then construct the SignaturePad, like shown in the demo of the SignaturePad.

Possible solution: resize earlier, and do not bind the canvas' width / height to the directives attributes. Leave it to the user to style the container via CSS and set the canvas CSS width/height to 100%. See http://embed.plnkr.co/ISkqtUMFNh0JBqnXLpzm/

[landgenoot]

This is a bug in https://github.com/szimek/signature_pad.

Replace https://github.com/szimek/signature_pad/blob/master/src/signature_pad.js#L90

With:

ratio = Math.max(window.devicePixelRatio || 1, 1);