Canvas problem

[Mitcherizer]

Canvas issues

Should canvas elements work straight "out of the box" with angularjs? I'm a bit confused (more than usual, sorry to say)

 

I have a canvas component where a user can draw some pretty pictures, or ugly ones.. The canvas is embedded directly into the html and references two javascript libs.  No magic here what I can see. And it works. Occasionally.

 

When it works

When I go directly to the html-file which contains the canvas and the drawing tools. No errors are thrown . The page has references to angular libs and an angular controller for adding keywords/tags to the drawing. No problems at all.

 

When it bombs

When I turn on the routing in app.js and include the page with the canvas element as a partial with ng-view an error is thrown that the lib can't find the canvas element Both libs are included in the html structure, or are at least visible in the HTML structure.  The canvas element is also visible in the HTML structure.

 

I have this in my lib to see if the canvas is there:

// Find the canvas element.

      var _canvas = document.getElementById(selector);

      if (!_canvas) {

        throw 'Error: I cannot find the canvas element!';

      }

 

Any ideas? Routing? Libs not included? Conflicts? 42?

 

[svei...@gmail.com]

I'm very new to AngularJS myself and I may be way off, but it sounds like your lib might be looking for the canvas before it has actually added to the page. I assume the lib code is executed immediately, while the the canvas is loaded later once AngularJs gets around to processing the view. What if you delay execution of the lib code a bit?

[Mitcherizer]

Good point, it sounds like a valid theory. I'll try that, thanks for the tip!