Html5 canvas помощь в реализации стрелочки

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
 
// general settings 
var middleX = canvas.width / 2; 
var middleY = canvas.height / 2; 
var radius = canvas.width / 2 - canvas.width / 10; 
var startAngleIndex = 0.7; 
var endAngleIndex = 2.3; 
 
 
// Arrow settings 
var arrowValueIndex = 1.5; 
var arrowColor = "#d01617"; 
var arrowWidth = canvas.width / 20; 
 
 
var DrawArrow = function() { 
  var arrowAngle = arrowValueIndex * Math.PI; 
  var toX = middleX + (radius) * Math.cos(arrowAngle); 
  var toY = middleY + (radius) * Math.sin(arrowAngle); 
 
  ctx.beginPath(); 
  ctx.moveTo(middleX, middleY); 
  ctx.lineTo(toX, toY); 
  ctx.strokeStyle = arrowColor; 
  ctx.lineWidth = arrowWidth; 
  ctx.stroke(); 
 
}; 
DrawArrow();

<canvas id="canvas" width="300" height="300"></canvas>