title: Drawing Arrow Head Curves in HTML5 Canvas
body: <p>I am attempting to draw the 3 arrows below. I can draw the top one correctly but I cannot draw the other 2 arrow heads correctly. I am using HTML5 Canvas to draw these arrows.</p>
  
  <p><img src="https://i.stack.imgur.com/cHfk9.png" alt="enter image description here"></p>
  
  <p>The problem occurs with my arcTo calls. I just cannot get the correct curve to occur for some reason. Maybe I should be using a Bezier curve? <strong>Would anyone be able to tell me what HTML5/Javascript functions I use to produce the above arrow heads?</strong></p>
  
  <p><strong>Can you provide an example of how to achieve the above arrow heads?</strong></p>
  
  <p>Heres the JSFiddle to show whats going wrong: <a href="http://jsfiddle.net/hJX8X/" rel="nofollow noreferrer">http://jsfiddle.net/hJX8X/</a></p>
  
  <pre><code>&lt;canvas id="testCanvas" width="400px" height="400px"&gt;
  
  &lt;/canvas&gt;
  &lt;script type="text/javascript"&gt;
  &lt;!--
      var canvas = document.getElementById("testCanvas");
      var dc     = canvas.getContext("2d");
  
      // Points which are correct (when I draw straight lines its a perfect arrow
      var width    = 400;
      var height   = 100;
      var arrowW   = 0.35 * width;
      var arrowH   = 0.75 * height;
      var p1       = {x: 0,              y: (height-arrowH)/2};
      var p2       = {x: (width-arrowW), y: (height-arrowH)/2};
      var p3       = {x: (width-arrowW), y: 0};
      var p4       = {x: width,          y: height/2};
      var p5       = {x: (width-arrowW), y: height};
      var p6       = {x: (width-arrowW), y: height-((height-arrowH)/2)};
      var p7       = {x: 0,              y: height-((height-arrowH)/2)};
  
      dc.clearRect(0, 0, canvas.width, canvas.height);
      dc.fillStyle = "#FF0000";
  
      dc.beginPath();
  
      dc.moveTo(p1.x, p1.y);
      dc.lineTo(p2.x, p2.y);
      dc.lineTo(p3.x, p3.y);      
      dc.moveTo(p3.x, p3.y);
      dc.arcTo(p3.x, p3.y, p4.x, p4.y, 50);
      dc.moveTo(p4.x, p4.y);
      dc.arcTo(p4.x, p4.y, p5.x, p5.y, 50);
      dc.moveTo(p5.x, p5.y);
      dc.lineTo(p6.x, p6.y);
      dc.lineTo(p7.x, p7.y);
  
      dc.closePath();
      dc.fill();
  
      /* Draw arrow without curves
      dc.moveTo(p1.x, p1.y);
      dc.lineTo(p2.x, p2.y);
      dc.lineTo(p3.x, p3.y);      
      dc.lineTo(p4.x, p4.y);  
      dc.lineTo(p5.x, p5.y);
      dc.lineTo(p6.x, p6.y);
      dc.lineTo(p7.x, p7.y);
      */
  --&gt;
  &lt;/script&gt;
  </code></pre>