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(https://plnkr.co/edit/mOU0ZucRSZzdWxVmTFIZ?p=preview). 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>

canvas.getContext is not a function

Sign up