Canvas drawing disappears on zoom in/out

Question

I have a HTML canvas in my application. When user draws something on that canvas and performs zoom in/out, it clears the drawing from that canvas.

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

Is there a way present which can keep that drawing as it even when we perform zoom in-out or resize

I tried the in-memory part, but it reduces the quality of drawing

Answer 1

Reading an image from the canvas before resizing it and writing the image back after can help.

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

But it doesn't work properly when we zoom out and tries to zoom in back in signature pad