Javascript 画布图像在加载时略微向右移动

我正在使用lib为我的web应用程序接受签名。加载保存的签名后，我遇到问题

假设我使用的是一个空白的signaturePad，我会创建一些签名并保存它

刷新页面后，将显示以下内容

请注意，它向右移动，并且似乎稍微放大了。

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

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

var canvas=document.querySelector（“canvas#signatureCanvas”）；
scope.signaturePad=新的signaturePad（画布）；
scope.c2=document.createElement（'canvas'）；
scope.ctx=scope.c2.getContext（'2d'）；
scope.img=新图像（）；
scope.img.crossOrigin=“匿名”；
scope.img.onload=函数（）{
scope.drawSig（）；
}
scope.img.src=scope.signature；
scope.drawSig=函数（）{
scope.ctx.drawImage（scope.img，0,0）；
scope.imgStr=scope.c2.toDataURL（“image/png”，”）；
scope.signaturePad.fromDataURL（scope.imgStr）；
};

您是否使用CSS缩放画布？另外，如果您可以创建问题的独立复制（在JSFIDLE/codepen/plnkr/您选择的沙盒中），这总是很有帮助的：）