How to use FabricJS and jsPDF to export in 300 dpi?

Question

I'm trying to figure out how to export my canvas in 300 dpi on pdf.

I found some articles that show how to calculate 300dpi for pixels on canvas (What is the best practice to export canvas with high quality images?) as well as convert it to pdf using jsPDF (Convert canvas to PDF)

However, I'm not very sure how I can design something on a 10cm x 6cm canvas and export it in 300dpi. Using the formula...

10cm * 300dpi / 2.54 = 1181px // width
6cm * 300dpi / 2.54 = 709px // height

I've created a canvas at 1181px width and 709px height.

However, when I create object using Fabric.js with the height 100px by 100px, I get this on the canvas.

However, when I export it using jspdf... I get this...

Here are my codes...

  // create a wrapper around native canvas element (with id="c")
  var canvas = new fabric.Canvas('canvas');
  canvas.backgroundColor = "white";

  // create a rectangle object
  var rect = new fabric.Rect({
    left: 0,
    top: 0,
    fill: 'red',
    width: 100,
    height: 100
  });

  // "add" rectangle onto canvas
  canvas.add(rect);

  $('#export-btn').click(function(){
    var imgData = canvas.toDataURL("image/jpeg", 1.0);
    var pdf = new jsPDF('l', 'mm', [60,100]);

    pdf.addImage(imgData, 'JPEG', 0, 0);
    var download = document.getElementById('download');

    pdf.save("download.pdf");
  });

Should i resize the imgData exported from canvas.toDataURL() before passing it to jsPDF?