Signature pad imprint text size change within canvas ratio

Question

I have implemented Signature pad canvas for my website. I want to make an imprint when saving signature after user signed. The problem I'm facing is to make that imprint size fit into canvas width. Canvas size is depends on users signature scale.

This is how it saved

If you could see I have trimmed out after signature drawn on the canvas space. And I'm using another function to print value on the top of the signature canvas after download it as an image. I want to adjust that text width as per canvas width to fit into the whole text value inside the canvas area.

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');

function dataURLToBlob(dataURL) {
  // Code taken from https://github.com/ebidel/filer.js
  var parts = dataURL.split(';base64,');
  var contentType = parts[0].split(":")[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], {
    type: contentType
  });
}

SignaturePad.prototype.removeBlanks = function() {
  var cif = "0000885458";
  var shortName = "/MR Jhon Doe";
  var ref = "0854220190000001585/";
  var imprintValue1 = "";
  var imprintValue = "";

  var imgWidth = this._ctx.canvas.width;
  var imgHeight = this._ctx.canvas.height;

  var imageData = this._ctx.getImageData(0, 0, imgWidth, imgHeight),
    data = imageData.data,
    getAlpha = function(x, y) {
      return {
        red: data[(imgWidth * y + x) * 4],
        green: data[(imgWidth * y + x) * 4 + 1],
        blue: data[(imgWidth * y + x) * 4 + 2]
      };
    },
    isWhite = function(rgb) {
      return rgb.red == 255 && rgb.green == 255 && rgb.blue == 255;
    },
    scanY = function(fromTop) {
      var offset = fromTop ? 1 : -1;

      // loop through each row
      for (var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {

        // loop through each column
        for (var x = 0; x < imgWidth; x++) {
          if (!isWhite(getAlpha(x, y))) {
            return y;
          }
        }
      }
      return null; // all image is white
    },
    scanX = function(fromLeft) {
      var offset = fromLeft ? 1 : -1;

      // loop through each column
      for (var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {

        // loop through each row
        for (var y = 0; y < imgHeight; y++) {
          if (!isWhite(getAlpha(x, y))) {
            return x;
          }
        }
      }
      return null; // all image is white
    };

  var cropTop = scanY(false),
    cropBottom = scanY(true),
    cropLeft = scanX(true),
    cropRight = scanX(false);

  cropTop += 30;
  cropRight += 20;

  var relevantData = this._ctx.getImageData(cropLeft - 10, cropTop - 20, cropRight - cropLeft, cropBottom - cropTop);
  this._ctx.canvas.width = cropRight - cropLeft;
  this._ctx.canvas.height = cropBottom - cropTop;

  if (cif && shortName && ref) {
    imprintValue1 = cif.concat("" + shortName);
    imprintValue = ref.concat(imprintValue1);
  }

  this._ctx.clearRect(0, 0, cropRight - cropLeft, cropBottom - cropTop);
  this._ctx.putImageData(relevantData, 0, 0);

  var canvas_width = this._ctx.canvas.width;

  var fontBase = canvas_width, // selected default width for canvas
    fontSize = 70;
  var ratio = fontSize / fontBase; // calc ratio
  var size = canvas_width * ratio; // get font size based on current width
  this._ctx.font = size;

  // draw the imprintValue
  this._ctx.fillStyle = "#e42f2f";
  this._ctx.fillText(imprintValue, 0, 15);
};

saveButton.addEventListener('click', function(event) {
  signaturePad.removeBlanks();
  var dataURL = signaturePad.toDataURL('image/png');

  download(dataURL, "signature.png");
});

function download(dataURL, filename) {
  if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
    window.open(dataURL);
  } else {
    var blob = dataURLToBlob(dataURL);
    var url = window.URL.createObjectURL(blob);

    var a = document.createElement("a");
    a.style = "display: none";
    a.href = url;
    a.download = filename;

    document.body.appendChild(a);
    a.click();

    window.URL.revokeObjectURL(url);
  }
}

cancelButton.addEventListener('click', function(event) {
  signaturePad.clear();
});

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  position: absolute;
  left: 0;
  top: 0;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 200px;
}

<script src="https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.umd.min.js"></script>
<h1>
  Put Signature
</h1>
<div class="wrapper">
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button id="save">Save</button>
  <button id="clear">Clear</button>
</div>