title: How to save drawn image with a background color using Signature Pad library for AngularJS/Ionic?
body: <p>I'm working on an Ionic project and implemented <a href="https://github.com/szimek/signature_pad" rel="nofollow">this</a> library to handle the drawing of a client signature.</p>
  
  <p>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.</p>
  
  <p>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 <code>backgroundColor</code> 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.</p>
  
  <p>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.</p>
  
  <p>This is how my template for drawing the signature:</p>
  
  <pre><code>&lt;ion-modal-view class="signature-modal"&gt;
  
    &lt;div class="button button-clear signature-close-button" ng-click="closeSignatureModal()"&gt;&lt;span class="icon ion-close"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="signature-container"&gt;
      &lt;div class="signature_canvas_container"&gt;
        &lt;canvas id="signature-pad" class="signature-canvas"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div class="signature-container-separator"&gt;&lt;/div&gt;
      &lt;div class="row signature-buttons-container"&gt;
        &lt;div class="col col-11"&gt;&lt;/div&gt;
        &lt;div class="col col-33"&gt;
          &lt;button class="button button-full button-light" data-action="clear" ng-click="clearSignature()"&gt;Limpiar&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="col col-12"&gt;&lt;/div&gt;
        &lt;div class="col col-33"&gt;
          &lt;button class="button button-full button-positive" data-action="save" ng-click="saveSignature()"&gt;Guardar&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="col col-11"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/ion-modal-view&gt;
  </code></pre>
  
  <p>My style for the canvas is this:</p>
  
  <pre><code>.signature-canvas{
    width : 100%;
    height : 100%;
    background-color: white;
  }
  </code></pre>
  
  <p>The configuration properties for the signature pad are these:</p>
  
  <pre><code>    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)";
  </code></pre>
  
  <p>Saving it is done like this:</p>
  
  <pre><code>var rawImage = signaturePad.toDataURL();
  </code></pre>
  
  <p>Am I missing something? Can PNG images be saved with a background color?</p>
  
  <h2>EDIT</h2>
  
  <p>I changed the background color to <code>rgb(0, 125, 255)</code> 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.</p>