canvas.getContext is not a function

Question

I have written a simple template for a AngularJs directive:

<div class="circle">
    <canvas></canvas>
</div>

My directive has the following look:

MobileApp.directive('circle', function () {
    return {
        restrict: 'E',
        scope: true,
        link: function (scope, elem, attrs) {
            ...
            var canvas = elem.find('canvas');
            var ctx = canvas.getContext('2d');
            ...
        }
    }
});

And the usage of that is simple enough:

<circle/>

I am getting an error when trying to call a method getContext('2d'):

TypeError: canvas.getContext is not a function

The canvas instance is selected and its JSON representation looks

{
  "0": {},
  "length": 1,
  "prevObject": {
    "0": {},
    "context": {},
    "length": 1
  },
  "context": {},
  "selector": "canvas"
}

I have already read about all related questions here, but the answer hasn't been found. Any help would be appreciated. Thanks.

Answer 1

I create a little plunker. In your sample i don't understand the relation between directive and template. Have you missing to add template property ? What i do in plunker :

Define template :

return {
    restrict: 'E',
    scope: true,
    template: '<div><canvas></canvas></div>',
    link: function (scope, elem, attrs) {
        var canvas = elem.find('canvas');
        console.log(canvas);
        var ctx = canvas[0].getContext('2d');
        console.log(canvas, ctx);
    }
}

Get canvas from the object that return by find method :

var ctx = canvas[0].getContext('2d');

And the use :

<circle></circle>

Answer 2

Replace var canvas = elem.find('canvas'); by var canvas = elem.find('canvas')[0];