title: Canvas object says undefined getContext() method in Angular JS/iONIC?
body: <p>I have been working on ionic Framework to develop a hybrid app.The app requires Signature plugin ,I have seen <a href="http://willowsystems.github.io/jSignature/#/about/" rel="nofollow noreferrer">JSignature</a>&amp;<a href="https://github.com/szimek/signature_pad" rel="nofollow noreferrer">SiganturePad</a> had nice implementation.but both of them implemented through as jQuery support.mine is fully supported with Angular JS.</p>
  
  <p>From the above choices I have decided to go through with SignaturePad implementation in my app. I am populating the SignaturePad html using <a href="http://ionicframework.com/docs/api/service/$ionicModal/" rel="nofollow noreferrer">$ionicModal</a> service.My code stuff is added here.</p>
  
  <p>Signature.html</p>
  
  <pre><code>&lt;ion-modal-view&gt; 
      &lt;div id="signature-pad" class="m-signature-pad"&gt;
      &lt;div class="m-signature-pad--body"&gt;
        &lt;canvas&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div class="m-signature-pad--footer"&gt;
        &lt;div class="description"&gt;Sign above&lt;/div&gt;
        &lt;button class="button clear" data-action="clear" ng-click="doSave()"&gt;Clear&lt;/button&gt;
        &lt;button class="button save" data-action="save"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
   &lt;/ion-modal-view&gt;
  </code></pre>
  
  <p>Js here</p>
  
  <pre><code>$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();
      };
  
  
  });
  </code></pre>
  
  <p>I had a issue to reference the DOM elements from html through getElementbyID().That issue is fixed by following solution.<a href="https://stackoverflow.com/questions/26123766/how-to-access-ionicmodal-object-elements-by-id-in-ionic-framework/26127067#26127067">ionic modal object reference</a></p>
  
  <p>By default Angular js providing some functions through <a href="https://docs.angularjs.org/api/ng/function/angular.element" rel="nofollow noreferrer">jQuery/jqlite</a>.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 jQuery object, I cannot avail the canvas property. So after running the code I am getting error as </p>
  
  <blockquote>
    <p>TypeError: Object [object Object] has no method 'getContext'</p>
  </blockquote>
  
  <p>How can I make as the canvas class or is there any way to meet my requirement?</p>