title: HTML5 & javascript: Drawing arrowheads on lines
body: <p>I've got a project that includes a number of animated flowcharts, which make extensive use of arrows to indicate flow process. I've created a function that will draw a line and cap it with an arrowhead: the line is extended upwards from the end point by half it's width, then to the right and down to extend the line by it's full width, then down and to the left to mirror the top part of the arrow, and finally back to the original line end. </p>
  
  <p>I've made a <a href="http://jsfiddle.net/runx4rsu/1/" rel="nofollow">JSFiddle</a> that demonstrates this.</p>
  
  <p>As you can see, it works correctly, but only when the line is perfectly horizontal and running from left to right. As there will be lines running in any direction, I need to be able to set the arrowhead to point in the same direction as the line's angle, with the arrowhead's back perpendicular to that angle. Anyone have any ideas on how to do this?</p>
  
  <p>This is the code I'm using:</p>
  
  <pre><code>function drawLine(xStart, yStart, xEnd, yEnd, strokeColour, strokeWidth) {
  var r = document.getElementById('theCanvas');
  r = r.getContext('2d');
  r.beginPath();
  r.strokeStyle = strokeColour;
  r.lineWidth = strokeWidth;
  r.moveTo(xStart, yStart);
  r.lineTo(xEnd, yEnd);
  r.lineTo(xEnd, yEnd - (strokeWidth / 2));
  r.lineTo(xEnd + strokeWidth, yEnd);
  r.lineTo(xEnd, yEnd + (strokeWidth / 2));
  r.lineTo(xEnd, yEnd);
  r.stroke();
  }
  
  drawLine(100, 100, 400, 100, '#000', 20);
  </code></pre>