画布图像略微向右移动

Question

我正在使用signature_pad lib来接受我的网络应用程序的签名。加载保存的签名后我遇到了问题。

假设我正在使用空白的签名板，我创建了一些签名并保存。

刷新页面后，就会出现这种情况。

请注意，它会向右移动，看起来也会略微放大。

知道为什么会这样吗？以下是我正在使用的一些代码：

<canvas class="signature-canvas" height="150" width="500" id="signatureCanvas"></canvas>

    var canvas = document.querySelector("canvas#signatureCanvas");
    scope.signaturePad = new SignaturePad(canvas);
    scope.c2 = document.createElement('canvas');
    scope.ctx = scope.c2.getContext('2d');
    scope.img = new Image();
    scope.img.crossOrigin = "Anonymous";          
    scope.img.onload = function() {
      scope.drawSig();
    }
    scope.img.src = scope.signature;

    scope.drawSig = function(){
        scope.ctx.drawImage(scope.img, 0, 0);
        scope.imgStr = scope.c2.toDataURL("image/png", "");
        scope.signaturePad.fromDataURL( scope.imgStr );
    };