Рисование холста исчезает при увеличении / уменьшении

Question

У меня есть 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();

Есть ли способ присутствия, который может сохранить этот рисунок таким, какой он есть, даже когда мы выполняем увеличение или уменьшение масштаба

Я пробовал часть в памяти, но это снижает качестворисунка

Answer 1

Чтение изображения с холста перед изменением его размера и последующая запись изображения могут помочь.

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); 

Но это не работает должным образом, когда мы уменьшаем масштаб и пытаемся увеличить обратно на панели подписи