jquerymobile中的签名板问题

Question

我添加了用于签名的canvas元素，并根据屏幕宽度调整了css的大小。一切都很好，但是当我画一条线或什么东西时，触摸的地方和绘制的线距离很短。

我该如何解决这个问题？

这是我的代码：

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;
}