Signature pad issue in jquerymobile

Question

I have added canvas element for signature and the css to resize according to the screen width. Everything is working fine, but when am drawing a line or something, the place touched and the line drawn is having little distance.

How can i fix this ?

Here is my Code :

HTML:

<div class="wrapper">
<div class="container">
<div class="canvas-container">
<canvas id="canvas"   style="background-color:#fff9cb;border:0px;"></canvas>
</div>
</div>
</div>

JQuery:

var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);

CSS:

.wrapper {
   display: table;
   padding: 0;
   width: 100%;
   height: 90px;
   position: relative;
 }
.container {
   display: table-cell;
   vertical-align: middle;
 }
.canvas-container {
  position: relative;
  min-width: auto;
  margin: 0 auto;
}
#canvas {
  width: 100%;
  height: 90px;
}