Question

---解决方案---

经过很长一段时间的重新研究，在我的驱动器上尝试并保存图像数据后，我找到了解决问题的方法。我将在这里编写解决方案，以解决像我这样的类似问题。

问题是我保存图像以撤消或重做事物的方式。为此，我获取了绘图层，将其转换为.png base64，将此base64绘制到我的背景上，并将我的背景再次保存为数组中的.png base64。从这个数组中我会读取undo / redo函数。

问题是，每次来自画布的对话 - ＆gt;线条改变了。因此，最小化我们使用的次数.toDataURL（）。

我意识到，对于.drawImage（），您不需要base64字符串作为参数。您只需传递包含要绘制的图像的画布即可。像这样我们不必进行png转换，甚至不会达到线条越来越胖的程度。像这样，只有一个转换，即最终将画布导出为.png或.jpg。

我希望其他人可以使用我的发现，而不必经历我必须经历的斗争。

---原始问题---

我正在尝试构建自己的绘图应用程序。它基于attrament.js，这是一个现有的库，它已经完成了这一点。我现在正在尝试为其添加新功能。

我制作了一个系统，您可以使用它来撤消/重做更改。为此，我有2个单独的画布，一个是空的，我绘制的，另一个是以前绘制的所有路径。在结束时，使用canvas.toDataURL（） - ＆gt;将绘图画布中的所有内容复制到背景画布上。 canvas.drawImage。

现在我的主要问题是，当图像被复制到背景画布上时，背景画布上的所有内容都会被“加肥”一点。

Fatter to smaller

正如你所看到的，它从左到右略微变胖。一切都是用相同的画笔和大小绘制的，但每次我停止以前的图纸都会有点肥胖。

还有其他人已经遇到过这个问题吗？为什么这些系列越来越胖？我怎样才能防止这些品系变胖呢？

感谢您的帮助！

编辑1：

我创建了一个JSFiddle，在创建它时，我意识到它与规模有关。 JSFiddle是一个可怕的黑客，但我无法包含.js，所以我把它放入脚本部分。

尝试更改html <script>标记中的比例，越高，它们就越胖。

<script>
// Scale the canvas for higher pixel density
var scale = 1;

JSFiddle似乎不适用于Edge。不能告诉你真正的原因，但在Firefox上没有任何问题。