Javascript 画布图形在放大/缩小时消失

我的应用程序中有一个HTML画布。当用户在该画布上绘制某些内容并执行放大/缩小操作时，它将清除该画布上的图形

var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");

var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)'
});

function resizeCanvas() {   
  var ratio = Math.max(window.devicePixelRatio || 1, 1);
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

有没有一种方法可以在执行放大或调整大小时保持该图形不变

---

我尝试了内存中的部分，但是它降低了画图的质量，在调整画布大小之前从画布上读取图像，然后在调整大小之后将图像写回会有所帮助

var data = signaturePad.toDataURL();    
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
signaturePad.fromDataURL(data); 

---

但是当我们缩小并尝试在签名板中放大时，它不能正常工作

更改画布元素的宽度和高度会使绘图消失。您可以使用css规则设置宽度和高度吗？设置canvas.width或canvas.height将清除缓冲区。你需要复制图像数据。你的代码没有缩放，只有调整大小，这会产生很大的不同。对于缩放，yoy可以定义缩放1，完全质量级别。对于调整大小，它更复杂。。。您希望它如何准确工作？假设您的用户从一个100 x 100的画布开始，在画布上绘制一些填充所有区域的图形，将大小调整为1000 x 1000。所有1000 x 1000是由上一个图形的已调整大小的副本填充，还是仅为当前绘图区域创建更多空间？如果是前者，您如何处理纵横比的变化？如果是后者，你如何处理收缩。