Not working with jsPDF if v-show is hidden at first

[hey0wing]

I had some pages with Navbar using v-show, and with SignaturePad in every page.

DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0

        <div id="Form0" ref="Form0" v-show="showing[0]">
                    <VueSignaturePad
                      :options="{onBegin: () => {$refs.Form0Signature.resizeCanvas()}}"
                      id="Form0Signature"
                      width="500px"
                      height="300px"
                      class="signaturePad"
                      ref="Form0Signature"
                      inline
                    />
        </div>
        <div id="Form1" ref="Form1" v-show="showing[1]">
                    <VueSignaturePad
                      :options="{onBegin: () => {$refs.Form1Signature.resizeCanvas()}}"
                      id="Form1Signature"
                      width="500px"
                      height="300px"
                      class="signaturePad"
                      ref="Form1Signature"
                      inline
                    />
        </div>
...
export default {
  name: "App",
  data: () => ({
    showing: {0:true, 1:false},
  }),
  methods: {
    downloadWithCSS() {
        html2canvas(forms[j], {canvas: canvasElement}).then(function(canvas) {
            var img = canvas.toDataURL("image/jpeg");
            var imgProps = doc.getImageProperties(img);
            if (j!==0){doc.addPage();}
            var pdfWidth = doc.internal.pageSize.getWidth();
            var pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
            doc.addImage(img, "PNG", 0, 0, pdfWidth, pdfHeight);
            if (j===1){doc.save("sample.pdf");}
       });
    }
}

[DaxtonChen]

Try this code: `

`

[Uraharadono]

I can confirm that v-show is blocking signature pad from being editable or usable for that matter. I didn't get any console errors, it was just not working.

I had this piece of code:

<div v-show="signatureControlsActive == true" class="signatureWrapper">
<div v-show="signaturePadVisible == true">
   <div>
      <VueSignaturePad
         id="signature"
         ref="signaturePad"
         width="100%"
         height="180px"
         :options="options" />
   </div>
</div>
<div v-show="signatureTextVisible == true"></div>
              <h3>Text</h3>
            </div>
          </div>

And replacing v-show with v-if like so:

<div v-if="signatureControlsActive == true" class="signatureWrapper">
<div v-if="signaturePadVisible == true">
   <div>
      <VueSignaturePad
         id="signature"
         ref="signaturePad"
         width="100%"
         height="180px"
         :options="options" />
   </div>
</div>
<div v-show="signatureTextVisible == true"></div>
              <h3>Text</h3>
            </div>
          </div>

Fixed it for me.

[jdexyz]

Changing the :key also works

[PaoloDiGallo]

when you open the page with the new/different signature pad try running this, it must happen after the canvas is visible and has a fixed size

setTimeout(()=>{ this.$refs..resizeCanvas(); }, 10)

[MarinaTripetska]

Hi, any updates? I has the same problem

[MarinaTripetska]

I found solution here

<VueSignaturePad height="300px" width="100%" ref="signaturePad" id="signaturePad" :options="{ onEnd, onBegin: () => { signaturePad.resizeCanvas() } }" />

event onBegin:

` onBegin: () => {
      signaturePad.resizeCanvas()
    }`