Responsive signature pad

[jcamilovallejos]

How can I make or build it responsive canvas ? Thanks.

[erikwii]

It is my technique to deal with responsiveness

var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'transparent',
});

function resizeCanvas() {
  canvas.width = wrapper.offsetWidth - 2;
  canvas.height = canvas.width * (3/5);
  
  signaturePad.clear();
}

window.onresize = resizeCanvas;

You can create function resizeCanvas() to maintain the aspect ratio that you want.
The size of canvas will follow the size of its wrapper.
Then, call it with window.onresize = resizeCanvas
You can also remove signaturePad.clear() to keep your content during viewport dimension changes.
Hope it helps