Render quality issue

[ASoldo]

Hi, I'm using this package to render some barcodes and I have an issue that doesn't make much sense to me.

I'm able to save my barcode on Mac os (Main Display) and it looks like this. Crisp and good quality.

but when I move my browser to an external display it renders it in low quality even tho it is full screen on both screens and elements are fully visible and crisp on both screens.

I'm not sure how to tackle this problem. Does anyone know what could go wrong and how to have it consistent?

This is my template:

   <div ref="printMe">
        <barcode
          height="50"
          width="1"
          :value="barcodeValue"
          :display-value="displayValue"
          format="code39"
          background="transparent"
          lineColor="black"
        >
        <!-- It is not loading -->
        Please insert CODE39 barcode
      </barcode>
   </div>

and script:

async print() {
        const el = this.$refs.printMe;
        // add option type to get the image version
        // if not provided the promise will return
        // the canvas.
        const options = {
          type: "dataURL",
          // useCORS: true
          imageSmoothingEnabled: false
        };
        this.output = await this.$html2canvas(el, options);
        let a = document.createElement("a");
        a.href = this.output;
        a.download = `${this.barcodeValue}`;
        a.click();
        a.remove();
      },

Thank you!