CODEWITHSUNDEEP
angularjshtml5-canvas
David
David

Reputation: 3604

Simple canvas in angularjs directive

I'm stuck (probably on some dumb mistake) trying to make a directive work with a canvas.

When I execute my code I get an element.getContext is not a functionwhich seems weird as my element is actually an HTMLCanvasElement.

This is my directive

.directive('pitchCanvas', function() {

    function link(scope, element, attrs) {
        console.info('element: ' + element);
        var ctx = element.getContext('2d');
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
    }

  return {
    restrict: 'E',
    replace: true,
    scope: true,
    link: link,
    template: '<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>'
  };
})

and this is a fiddle where I placed a simplified version of my code and can´t make work.

Any help will be very appreciated.

Upvotes: 6

Views: 4487

Answers (1)

OrenD
OrenD

Reputation: 1741

You should replace:

element.getContext('2d');

With:

element[0].getContext('2d');

Upvotes: 7

Related Questions