使用CSS transform: scale(2)缩放后canvas出现模糊如何修复？

我尝试了谷歌上能找到的所有相关方案，依然无法解决canvas的模糊问题。
由于zoom属性在不同浏览器中对元素定位的影响存在差异，且CSS 2D translate()通常比使用position: absolute设置top、left属性的FPS表现更好，因此我选择使用CSS transform相关属性实现变换。

对应实现代码 #

JavaScript 代码 #

const dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
const chineseSize = 60
const scale = 2

HanziWriter.create($('#test1')[0], '龍', {
  renderer: 'canvas',
  width: chineseSize * dpr * scale,
  height: chineseSize * dpr * scale,
  padding: 2
});


HanziWriter.create($('#test2')[0], '龍', {
  renderer: 'canvas',
  width: chineseSize * dpr * scale,
  height: chineseSize * dpr * scale,
  padding: 2
});

CSS 代码 #

html, body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  transform-origin: left top;
}

canvas {
  width: 60px;
  height: 60px;
}

#test1 {
  left: 0;
  transform: scale(2);
}

#test2 {
  left: 50%;
  zoom: 200%;
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.2.0/dist/index.cjs.min.js"></script>
<div id="test1"></div>
<div id="test2"></div>

内容的提问来源于stack exchange，提问作者Jason Lam