title: Canvas SignaturePad doesn't clear on Mobile Phonegap App (Android)
body: <p>Our application has the feature of drawing a signature on a pad. We're using the signature pad created by <a href="https://github.com/szimek/signature_pad" rel="nofollow noreferrer">szimek</a> and also make use of Ionic AngularJS framework.</p>
  
  <h1>Usecase Description</h1>
  
  <p>The person clicks on a button and the system opens a Modal screen which then shows the signature pad. The user can clear and save the image. When he saves it and opens the signature pad again (by pressing on the button) the previous drawn image is displayed and the user can add something to it.</p>
  
  <p><img src="https://i.stack.imgur.com/qFMgg.png" alt="enter image description here"></p>
  
  <h1>The Problem</h1>
  
  <p>The problem we're encountering is that on the Android device. When the user has  drawn an image and returns to the signature view, it displays the previous drawn image but it doesn't dissapear when the person clears it. It does 'clears' it because after saving it, it saves an empty image. It's almost like it shows a cached image. We want to screen to be clear of any images after pressing the 'clear'-button.</p>
  
  <p>There is something in the progress of wiping the canvas in which the Android doesn't do correctly. In each other tested device (IPad, Browser on the desktop) it appears to work fine. </p>
  
  <h1>Code</h1>
  
  <h3>Modal opening</h3>
  
  <p>It all begins in the orderView.html. There I assign a click event to open a modal screen with the signature pad:</p>
  
  <pre><code>&lt;ion-item ng-click="openModal('app/components/order/signature/signaturepadView.html', $event)"&gt;
                      &lt;div class="signature padding" ng-switch="_signatureImage || '_undefined_'"&gt;
                          &lt;img ng-switch-when="_undefined_" ng-src="assets/img/signature_placeholder.png" alt="" /&gt;
                          &lt;img ng-switch-default ng-src="{{_signatureImage}}" alt="" /&gt;
                      &lt;/div&gt;
                  &lt;/ion-item&gt;
  </code></pre>
  
  <p>Ionic modal code: </p>
  
  <pre><code>// Ionic Modal
      $ionicModal.fromTemplateUrl('modal', {
          scope: $scope,
          animation: 'slide-in-up'
      }).then(function (modal) {
          $scope.modal = modal;
      });
      $scope.openModal = function (include, $event) {
          $event.stopPropagation();
          $scope.include = include;
          $scope.modal.show();
      };
      $scope.closeModal = function () {
          $scope.modal.hide();
          $scope._signatureImage = OrderService.getSignatureImage();
      };
  
      // Cleanup the modal when we're done with it!
      $scope.$on('$destroy', function () {
          $scope.modal.remove();
      });
  </code></pre>
  
  <h3>signatureView.html</h3>
  
  <p>This is the code in the signatureView.html file. </p>
  
  <pre><code>&lt;ion-modal-view class="modal" ng-controller="SignatureCtrl"&gt;
      &lt;ion-pane&gt;
          &lt;ion-header-bar class='bar-stable'&gt;
              &lt;h1 class='title'&gt; Signature &lt;/h1&gt;
              &lt;ion-header-buttons side="left"&gt;
                  &lt;button class="button signature-back-button" ng-click="closeModal()"&gt;&lt;i class="icon ion-ios-arrow-back"&gt;&lt;/i&gt; Back&lt;/button&gt;     
              &lt;/ion-header-buttons&gt;
          &lt;/ion-header-bar&gt;
          &lt;ion-content class='has-header' scroll='false'&gt;
              &lt;canvas id='signatureCanvas'&gt;&lt;/canvas&gt;
              &lt;div class='button-bar'&gt;
                  &lt;a class='button button-positive' ng-click='clearCanvas()'&gt;Clear&lt;/a&gt;
                  &lt;a class='button button-balanced' ng-click='saveCanvas(); closeModal()'&gt;Save&lt;/a&gt;
              &lt;/div&gt;
              &lt;br&gt;
          &lt;/ion-content&gt;
      &lt;/ion-pane&gt;
  &lt;/ion-modal-view&gt;
  </code></pre>
  
  <h3>signatureController.js</h3>
  
  <p>The function are being handled in the signatureController.js:</p>
  
  <pre><code>angular.module('directory.signatureController', [])
  
      .controller('SignatureCtrl', function ($scope, OrderService) {
          var canvas = document.getElementById('signatureCanvas');
          resizeCanvas();
          var signaturePad = new SignaturePad(canvas);
          signaturePad.backgroundColor = "white";
  
          signaturePad.minWidth = 2;
          signaturePad.maxWidth = 4.5;
  
          $scope.clearCanvas = function () {
              signaturePad.clear();
          }
  
          $scope.saveCanvas = function () {
              var sigImg = signaturePad.toDataURL();
              $scope.signature = sigImg;
              OrderService.setSignatureImage(sigImg);
          }
  
          function resizeCanvas() {
              var ratio = window.devicePixelRatio || 1;
              canvas.width = window.innerWidth; //document.width is obsolete
              canvas.height = window.innerHeight - 96; //document.height is obsolete
          };
      });
  </code></pre>
  
  <h3>signature_pad.js</h3>
  
  <p>From here I would suggest looking for the code in the signature_pad.js. I think the problem is in the clear function so I can link to the clear function in the signature file. <a href="https://github.com/szimek/signature_pad" rel="nofollow noreferrer">For the full code here a link to his github.</a></p>
  
  <pre><code>SignaturePad.prototype.clear = function () {
      var ctx = this._ctx,
          canvas = this._canvas;
  
      ctx.fillStyle = this.backgroundColor;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      this._reset();
  }; 
  </code></pre>
  
  <h1>Help</h1>
  
  <p>Please help us, if the formatting of this question is too vague or needs some elaboration, please tell me and i'll edit it.</p>