Javascript HTML5画布图像偏移和纵横比错误？

在使用画布上下文的drawImageimg、offsetx、offsety函数时，我遇到了一个奇怪的问题。我是这样做的：

在调用drawImage之前，创建画布上下文并获取图像源canvasContext.toDataUrl 将图像源应用于新图像，并使用prevImage.onload等待图像加载 问题是，当我绘制图像时，x和y上的偏移似乎都关闭了。 这里有一个例子

之前：

之后：

经过几次手术后，我在最初的照片上画出了原图，但我不认为这有什么关系。请注意，图纸绘制后，图纸质量也会下降

在初始化函数中，我有：

editingPage = PDFView.pages[pageNumber - 1];
canvasElement = editingPage.canvas;
rect = canvasElement.getBoundingClientRect();
imgSource = canvasElement.toDataURL();   

prevImage = new Image(); //prevImage opnieuw initialiseren
prevImage.src = imgSource; //Afbeelding source uit canvas in source van prevImage plaatsen (kopieren)
prevImage.onload = function() {
    canvasContext.drawImage(prevImage, 0, 0);
}

在用户交互之后，我有：

editingPage = PDFView.pages[pageNumber - 1];
canvasElement = editingPage.canvas;
rect = canvasElement.getBoundingClientRect();
imgSource = canvasElement.toDataURL();   

prevImage = new Image(); //prevImage opnieuw initialiseren
prevImage.src = imgSource; //Afbeelding source uit canvas in source van prevImage plaatsen (kopieren)
prevImage.onload = function() {
    canvasContext.drawImage(prevImage, 0, 0);
}

这里可能出了什么问题？ 我很感激

编辑：整个脚本

---

如果你能用小提琴演奏，我将不胜感激。我应该发布我的整个剧本吗？我正在使用mozilla的PDF.JS来显示PDF文档，但我会发布我的脚本