How to save drawn image with a background color using Signature Pad library for AngularJS/Ionic?

Question

I'm working on an Ionic project and implemented this library to handle the drawing of a client signature.

I've managed to implement this with no problem, I can draw, save and show the image with no problem, except one detail: the image is saved with a transparent background.

By default, the image is saved as a PNG file, which is something desired on my end, but it needs to have a white background. The library states that the backgroundColor can be set to any non-transparent color, but only works for JPEG images, and indeed I tried this for a PGN image and it got saved with a transparent background.

I tried to apply a background color to my canvas on my CSS, but when the image is saved the background color isn't applied to the image. I know I could just display on a white background, but it's part of our requirements for it to have a white background.

This is how my template for drawing the signature:

<ion-modal-view class="signature-modal">

  <div class="button button-clear signature-close-button" ng-click="closeSignatureModal()"><span class="icon ion-close"></span></div>
  <div class="signature-container">
    <div class="signature_canvas_container">
      <canvas id="signature-pad" class="signature-canvas"></canvas>
    </div>
    <div class="signature-container-separator"></div>
    <div class="row signature-buttons-container">
      <div class="col col-11"></div>
      <div class="col col-33">
        <button class="button button-full button-light" data-action="clear" ng-click="clearSignature()">Limpiar</button>
      </div>
      <div class="col col-12"></div>
      <div class="col col-33">
        <button class="button button-full button-positive" data-action="save" ng-click="saveSignature()">Guardar</button>
      </div>
      <div class="col col-11"></div>
    </div>
  </div>
</ion-modal-view>

My style for the canvas is this:

.signature-canvas{
  width : 100%;
  height : 100%;
  background-color: white;
}

The configuration properties for the signature pad are these:

    canvasPad = document.getElementById("signature-pad");
    $scope.resizeCanvas(); 
    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)";

Saving it is done like this:

var rawImage = signaturePad.toDataURL();

Am I missing something? Can PNG images be saved with a background color?

EDIT

I changed the background color to rgb(0, 125, 255) and the canvas didn't change the color, thought it was my CSS and removed the background-color property from there and still the canvas was shown as white, the color from the CSS is used but that doesn't affect the background for the image. Why isn't rendering the canvas with the background set on the signature pad's properties? No matter where I put the background color, either the CSS or the pad's properties, no color is applied to the image signature I save.

Answer 1

I checked the Draw over image example from the author's page and the way he instantiated the SignaturePad gave away a solution for this issue:

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

If you set the background color like this, instead of doing signaturePad.backgroundColor = 'rgba(255,255,255,1)', then the background color takes effect and when you save the image and you display it later it will be shown with a background color.

Although if you require to change the background color after the SignaturePad is instantiated, then I might suggest dismissing and recreating the canvas again, since setting the background color property after creating the instance of the SignaturePad doesn't affect the color.