CODEWITHSUNDEEP
javascriptandroidhtmlcanvasionic-framework
Danny Hoeve
Danny Hoeve

Reputation: 722

Canvas SignaturePad doesn't clear on Mobile Phonegap App (Android)

Our application has the feature of drawing a signature on a pad. We're using the signature pad created by szimek and also make use of Ionic AngularJS framework.

Usecase Description

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.

enter image description here

The Problem

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.

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.

Code

Modal opening

It all begins in the orderView.html. There I assign a click event to open a modal screen with the signature pad:

<ion-item ng-click="openModal('app/components/order/signature/signaturepadView.html', $event)">
                    <div class="signature padding" ng-switch="_signatureImage || '_undefined_'">
                        <img ng-switch-when="_undefined_" ng-src="assets/img/signature_placeholder.png" alt="" />
                        <img ng-switch-default ng-src="{{_signatureImage}}" alt="" />
                    </div>
                </ion-item>

Ionic modal 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();
    });

signatureView.html

This is the code in the signatureView.html file. 

<ion-modal-view class="modal" ng-controller="SignatureCtrl">
    <ion-pane>
        <ion-header-bar class='bar-stable'>
            <h1 class='title'> Signature </h1>
            <ion-header-buttons side="left">
                <button class="button signature-back-button" ng-click="closeModal()"><i class="icon ion-ios-arrow-back"></i> Back</button>     
            </ion-header-buttons>
        </ion-header-bar>
        <ion-content class='has-header' scroll='false'>
            <canvas id='signatureCanvas'></canvas>
            <div class='button-bar'>
                <a class='button button-positive' ng-click='clearCanvas()'>Clear</a>
                <a class='button button-balanced' ng-click='saveCanvas(); closeModal()'>Save</a>
            </div>
            <br>
        </ion-content>
    </ion-pane>
</ion-modal-view>

signatureController.js

The function are being handled in the signatureController.js:

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
        };
    });

signature_pad.js

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. For the full code here a link to his github.

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();
};

Help

Please help us, if the formatting of this question is too vague or needs some elaboration, please tell me and i'll edit it.

Upvotes: 2

Views: 3094

Answers (1)

Danny Hoeve
Danny Hoeve

Reputation: 722

In all previous test the 

signaturePad.backgroundColor = "white";

Was not needed. We added it and didn't test after that if this was the solution. After a brief test this morning setting the SignaturePad background color seems to fix this.

So the answer to our problem was already in our code. Consider this question therefore solved.

Upvotes: 0

Related Questions