Signature_pad: Image is saved with a black transparent background

Created on 3 May 2016 · 4Comments · Source: szimek/signature_pad

I set the properties for the signature pad as follows:

  signaturePad = new SignaturePad(canvasPad);
  signaturePad.minWidth = 1;
  signaturePad.maxWidth = 1.5;
  signaturePad.dotSize = 3;
  signaturePad.backgroundColor = "rgb(255, 255, 255)";
  signaturePad.penColor = "rgb(66, 133, 244)";

I'm setting the background color as white, but when I saved and then reloaded it, it was shown with a black background, I tried saving it as PNG and JPEG, but with the first the background is transparent and the other I get a black background. Am I implementing something wrong? If you need more code I'll happily comply.

Source

auam88

Most helpful comment

After doing some testing of my own I started to check examples that used a background color, luckily the Drawing over an image demo that the author provided showed me the other way to instantiate the SignaturePad:

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

When the background color was set like this, it persisted on all of my JPEG images I drew. If anyone has this kind of problem, I recommend passing the parameters like this instead of setting them after.

auam88 on 5 May 2016

👍4

All 4 comments

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

auam88 on 5 May 2016

👍4

The real bug is: backgroundColor: 'rgb(255,255,255)' or backgroundColor: 'rgba(255,255,255,0)'
will not work and generate a black background.
Instead using: backgroundColor: '#ffffff' will work.