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

I am working on an ionic framework for mashup development. The app requires a signature plugin, I saw JSignature & SiganturePad had a nice implementation. but both of them are implemented with jQuery support.mine is fully supported by Angular JS.

From the options above, I decided to move on to implementing SignaturePad in my application. I am populating SignaturePad html using $ ionicModal . This is where code stuff is added.


    <div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body">
    <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>


Js here

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

  $scope.closeModal = function() {
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
  // 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);

  if (angular.isUndefined($scope.signaturePad)) {
        alert("Please provide signature first.");
    } else {$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");

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



I am having problem referencing DOM elements from html via getElementbyID (). This issue was fixed with the following solution. ionic modal reference

By default, Angular js provides some functionality via jQuery / jqlite . So after all the trouble and I got it to work this morning. But according to jqlite, canvas elements are accessed via id or selectors returned as a jQuery object, not as a canvas. Since it is a jQuery object, I cannot use the canvas property. So after running the code, I get an error like

TypeError: Object [object Object] has no getContext method

How can I render as a canvas class or is there a way to satisfy my requirements?


source to share

1 answer

Returns an array



Returns the item



So, to get a 2d context, we have to do:

angular.element[0].getContext('2d') //angular.element[0] must be a canvas element


By the way, it's better to be careful when using angular.element inside the controller. This will make your test difficult.



All Articles