title: RaphaelJS in Ionic Framework: TypeError: Cannot read property 'path' of undefined
body: <p>I am creating a mobile Apps using Ionic Framework. In this project, I am using Pathfinding.js and Raphael.js library to draw a path (using svg) in my navigation.html page.</p>
  
  <p>My project structure looks like this:</p>
  
  <p>www</p>
  
  <p>js (folder)</p>
  
  <ul>
  <li><p>controllers.js (file)</p>
  
  <p>templates (folder)</p>
  
  <p>navigation.html (file)</p></li>
  </ul>
  
  <p>index.html (file)</p>
  
  <p>Inside index.html, it contains the following code snippet:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/raphael.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/pathfinding-browser.min.js"&gt;    &lt;/script&gt;
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Inside navigation.html, it contains the following code snippet:</p>
  
  <pre><code> &lt;div id="draw_area"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In my controller.js, I have the following code snippet:</p>
  
  <pre><code> var paper = Raphael("draw_area", 300, 300);
  console.log("paper" + paper)
      var grid = new PF.Grid(120, 60);
      var finder = new PF.AStarFinder();
      var gridBackup = grid.clone();
      var path = finder.findPath(0, 0, 2, 2, gridBackup);
  
      var p1;
      var pathStyle = {
          stroke: 'yellow',
          'stroke-width': 3
      }
  
  
  
      var numRows = 100;
      var numCols = 120;
      var nodeSize = 10;
      var rects = [];
      grid.setWalkableAt(1, 0, false);
  
      executeTask();
  
      var nodeColorizeEffect = {
          duration: 50
      }
  
  
  
      function colorizeNode(node, color) {
          node.animate({
              fill: color
          },
              this.nodeColorizeEffect.duration);
      }
  
      function createRowTask(rowId) {
          rects[rowId] = [];
          for (j = 0; j &lt; numCols; ++j) {
              x = j * nodeSize;
              y = rowId * nodeSize;
  
  
              rect = paper.rect(x, y, nodeSize, nodeSize);
  
              rect.attr("fill", "#f00");
              rect.attr("stroke", "#fff");
              rects[rowId].push(rect);
          }
  
      }
  
      function executeTask() {
  
          tasks = [];
          for (i = 0; i &lt; numRows; ++i) {
              tasks.push(createRowTask(i));
          }
          drawPath(path);
  
  
      }
  
      function setStartEnd() {
          var coord = toGridCoordinate(5, 5)
          grid = this.grid
          var gridX = coord[0]
          var gridY = coord[1];
  
  
      }
  
      function drawPath(path) {
          if (!path.length) {
              return;
          }
          var svgPath = buildSvgPath2(path);
          this.path = this.paper.path(svgPath).attr(this.pathStyle);
      }
  
      /**
       * Given a path, build its SVG represention.
       */
  
      function buildSvgPath2(path) {
          var i, strs = [],
              size = this.nodeSize;
          var pathArray = " [ [M," + (path[0][0] * size + size / 2) + "," + (path[1][1] * size + size / 2) + "]"
  
  
          for (i = 1; i &lt; path.length; ++i) {
              pathArray += ",[L," + (path[i][0] * size + size / 2) + "," + (path[i][1] * size + size / 2) + "]"
  
          }
          pathArray += "];"
          console.log(pathArray);
          return pathArray;
  
      }
  </code></pre>
  
  <p>However, this line of code, this.path = this.paper.path(svgPath).attr(this.pathStyle); gives me an error that says "TypeError: Cannot read property 'path' of undefined". I have tried many ways but could not solve the error. </p>
  
  <p><strong>EDIT</strong>:
  It seems like the variable paper cannot find the id "draw_area" on the navigation.html. </p>
  
  <p>Can anyone please tell me what is wrong with my code? Any help will be appreciated. Looking forward to your answer. Thanks a ton!</p>