Canvas object says undefined getContext() method in Angular JS/iONIC?

I have been working on ionic Framework to develop a hybrid app.The app requires Signature plugin ,I have seen JSignature&SiganturePad had nice implementation.but both of them implemented through as jquery support.mine is fully Supported with Angular JS.

From the above choices I have decided to go through with SignaturePad implementation in my app.I am populating the SignaturePad html using $ionicModal service.My code stuff is added here.

Signature.html

<ion-modal-view> 

    <div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body">
      <canvas></canvas>
    </div>
    <div class="m-signature-pad--footer">
      <div class="description">Sign above</div>
      <button class="button clear" data-action="clear" ng-click="doSave()">Clear</button>
      <button class="button save" data-action="save">Save</button>
    </div>
  </div>  
 </ion-modal-view>

Js here

$ionicModal.fromTemplateUrl('templates/signature.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
    $scope.wrapper = angular.element(document.getElementById("signature-pad"));
    var  canvas = angular.element($scope.wrapper.find('.canvas')); 

    SignaturePad(canvas);   
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
  //$timeout($scope.openModal, 200);

 $scope.doSave=function()
  {
  if (angular.isUndefined($scope.signaturePad)) {
        alert("Please provide signature first.");
    } else {
        window.open($scope.signaturePad.toDataURL());
    }
  };
  var SignaturePad = function (canvas, options) {
        var self = this,
            opts = options || {};

        this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
        this.minWidth = opts.minWidth || 0.5;
        this.maxWidth = opts.maxWidth || 2.5;
        this.dotSize = opts.dotSize || function () {
            return (this.minWidth + this.maxWidth) / 2;
        };
        this.penColor = opts.penColor || "black";
        this.backgroundColor = opts.backgroundColor || "rgba(0,0,0,0)";
        this.onEnd = opts.onEnd;
        this.onBegin = opts.onBegin;

        this._canvas = canvas;


        this._ctx = canvas.getContext("2d");
        console.log("CANVAS"+this._canvas.width);
        //this.clear();

      //  this._handleMouseEvents();
       // this._handleTouchEvents();
    };


});

I had a issue to reference the DOM elements from html through getElementbyID().That issue is fixed by following solution.ionic modal object reference

By default Angular js providing some functions through jquery/jqlite.So after all the issue and I got it to work by this morning.but as per the jqlite the canvas elements accessing through id or selectors returning as jquery object not as canvas.So as jqury object ,I cannot avail the canvas property.so after running the code I am getting error as

TypeError: Object [object Object] has no method 'getContext'

So how can I make as the Canvas class or is ther anyway to meet my requirement?