fabricjs 在模拟移动触摸设备时无法正确渲染

Question

我使用 Threejs 来管理画布（canvas0）（例如，放大/缩小和平移）并使用 Fabricjs 进行注释（canvas1）。
当使用鼠标事件时，这在 Chrome 浏览器中工作正常，但在通过 chrome 调试器中的“切换设备工具栏”按钮模拟移动触摸设备时无法正常工作。
演示它的示例位于here

具体来说，当在canvas0上绘图时，实时创建的路径被渲染在错误的位置（尽管结束触摸时路径出现在正确的位置）。 我观察到，fabricjs lowerCanvas 具有代码中定义的正确尺寸（256256 px），但 upperCanvas 显示错误的尺寸 512512 px，代码中未指定该尺寸。 （在创建期间和最终确定之前需要 upperCanvas 来渲染路径）。 偶尔upperCanvas，刷新页面后大小正确，类似lowerCanvas，然后路径渲染正确。
但其他时候，会出现错误的 512*512 px 尺寸，然后出现问题。
使用“硬重置”选项重新加载页面并不能解决问题。

问题可以通过以下方式证明：

• 在 Chrome 中单击 F12（获取调试器）
• 单击“切换设备工具栏”按钮并选择其中一个模拟设备（例如 iPhoneSE）。
• 在此配置中重新加载页面（按 F5）
• 在画布上绘图0

请参阅此处中的代码并在完整视图中运行，请使用此链接

let dummyCodeToSatisfyStackOverflow = 3;

什么将 upperCanvas 设置为 512*512 px？
如何设置upperCanvas的大小？ （调用fabricCanvas.setDimensions({width:256, height:256})仅设置lowerCanvas）；

Answer 1

基于此链接我设置了fabric.devicePixelRatio，例如

fabric.devicePixelRatio = 1; 

，在初始化画布之前，这解决了问题。