Intenté casi todo lo que pude encontrar en Google y todavía no puedo obtener la solución en el lienzo.
Debido a que el zoom afecta el posicionamiento de manera diferente en diferentes navegadores, quiero usar CSS 2d translate() generalmente proporcionará mejores FPS que la posición: superior e izquierda absolutas.
https://jsfiddle.net/p0L9ztw8/
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 }); 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%; } <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>¿Has probado la renderización de imágenes pixeladas en css? Puede ser lo que se necesita en el lienzo y cada div a escalar.
canvas { image-rendering: -moz-crisp-edges;image-rendering: -webkit-crisp-edges;image-rendering: pixelated;image-rendering: crisp-edges; width: 60px; height: 60px; }