title: PaperJS and drawing an arrow at end of a line when adding multiple tools
body: <p>I'm trying to create some tools on a canvas.  On of the tools I would like to create is a line with an arrow at the end.  I am able to get the code to work on it's own, but when I try and add along side other tools it does not draw the arrowhead, it will only draw a line.  I'm not to sure what I am missing in my code to get it to work.  Any help would be appreciated, maybe there is a better way, I am open to suggestions.    </p>
  
  <p>This code does not work;</p>
  
  <pre><code>paper.install(window);
  var forward;   
  window.onload = function() {
    paper.setup('sketx-canvas');
     forward = new Tool();
      var pathforward;
      forward.onMouseDown = function(event) {
          // Create a new path and set its stroke color to black:
          pathforward = new Path({
              segments: [event.point],
              strokeColor: 'red',
              strokeWidth: 4,              
          });                            
      }
  
      // While the user drags the mouse, points are added to the path
      // at the position of the mouse:
      forward.onMouseDrag = function(event) {
          pathforward.add(event.point);
      }     
  
      // When the mouse is released, we simplify the path and add arrow:
      forward.onMouseUp = function(event) {
          pathforward.simplify(300);     
          var vector  = pathforward.getPointAt(pathforward.length) - pathforward.getPointAt(pathforward.length-25); 
          var arrowVector = vector.normalize(18);
          var path2 = new Path({
            segments: [pathforward.getPointAt(pathforward.length) + arrowVector.rotate(145), pathforward.getPointAt(pathforward.length), pathforward.getPointAt(pathforward.length) + arrowVector.rotate(-145)],
            fillColor: 'black',
            strokeWidth: 6,              
          }); 
          path2.scale(1.3);                                     
      }        
  
  }
  </code></pre>
  
  <p>This code does work;</p>
  
  <pre><code>    var path;
      function onMouseDown(event) {
          // Create a new path and set its stroke color to black:
          path = new Path({
              segments: [event.point],
              strokeColor: 'red',
              strokeWidth: 4,
              // if we want dashed lines use dashArray: [2, 4],                
          });                            
      }
  
      // While the user drags the mouse, points are added to the path
      // at the position of the mouse:
      function onMouseDrag(event) {
          path.add(event.point);
      }     
  
      // When the mouse is released, we simplify the path and add arrow:
      function onMouseUp(event) {
          path.simplify(300);   ;    
          var vector  = path.getPointAt(path.length) - path.getPointAt(path.length-25); 
          var arrowVector = vector.normalize(18);
          var path2 = new Path({
            segments: [path.getPointAt(path.length) + arrowVector.rotate(145), path.getPointAt(path.length), path.getPointAt(path.length) + arrowVector.rotate(-145)],
            fillColor: 'black',
            strokeWidth: 6,              
          }); 
          path2.scale(1.3);                                     
      }
  </code></pre>
  
  <p>Got it working,  here is the final code;  </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  paper.install(window);
  var forward;
  
  
  
  window.onload = function() {
    paper.setup('sketx-canvas');
     forward = new Tool();
      var pathforward;
      forward.onMouseDown = function(event) {
          // Create a new path and set its stroke color to black:
          pathforward = new Path({
              segments: [event.point],
              strokeColor: 'red',
              strokeWidth: 4,
              // if we want dashed lines use dashArray: [2, 4],                
          });                            
      }
  
      // While the user drags the mouse, points are added to the path
      // at the position of the mouse:
      forward.onMouseDrag = function(event) {
          pathforward.add(event.point);
      }     
  
      // When the mouse is released, we simplify the path and add arrow:
      forward.onMouseUp = function(event) {
          pathforward.simplify(300); 
          var point = pathforward.getPointAt(pathforward.length)
          var vector  = point.subtract(pathforward.getPointAt(pathforward.length-25)); 
          console.log(vector);
          var arrowVector = vector.normalize(18);
          var path2 = new Path({
            segments: [point.add(arrowVector.rotate(145)), point, point.add(arrowVector.rotate(-145))],
            fillColor: 'black',
            strokeWidth: 6,              
          }); 
          path2.scale(1.3);                                     
      }  
  </code></pre>