110110 canvas = wrapper .querySelector (" canvas" ),
111111 signaturePad;
112112
113+ signaturePad = new SignaturePad (canvas);
114+
113115 // Adjust canvas coordinate space taking into account pixel ratio,
114- // to make it look crisp on mobile devices.
115- // This also causes canvas to be cleared.
116- if (window .matchMedia (" (min-width: 768px)" ).matches ) {
117- function resizeCanvas () {
118- // When zoomed out to less than 100%, for some very strange reason,
119- // some browsers report devicePixelRatio as less than 1
120- // and only part of the canvas is cleared then.
121- var ratio = Math .max (window .devicePixelRatio || 1 , 1 );
122- canvas .width = canvas .offsetWidth * ratio;
123- canvas .height = canvas .offsetHeight * ratio;
124- canvas .getContext (" 2d" ).scale (ratio, ratio);
125- }
126- window .onresize = resizeCanvas;
127- resizeCanvas ();
116+ // to make it look crisp on smaller screens.
117+ // https://github.com/szimek/signature_pad#handling-high-dpi-screens
118+ // (This also causes canvas to be cleared.)
119+ function resizeCanvas () {
120+ // When zoomed out to less than 100%, for some very strange reason,
121+ // some browsers report devicePixelRatio as less than 1
122+ // and only part of the canvas is cleared then.
123+ var ratio = Math .max (window .devicePixelRatio || 1 , 1 );
124+ canvas .width = canvas .offsetWidth * ratio;
125+ canvas .height = canvas .offsetHeight * ratio;
126+ canvas .getContext (" 2d" ).scale (ratio, ratio);
127+ signaturePad .clear (); // otherwise isEmpty() might return incorrect value
128128 }
129-
130- signaturePad = new SignaturePad (canvas );
129+ window . onresize = resizeCanvas;
130+ resizeCanvas ( );
131131
132132 $ (' #clear_button' ).on (" click" , function (event ) {
133133 signaturePad .clear ();
@@ -144,4 +144,4 @@ function resizeCanvas() {
144144
145145
146146 </script >
147- @stop
147+ @stop
0 commit comments