Drawing an arrow in JS can be hard!

drawArrow.js

function drawArrow(x, y, w, h, rot) {
    ctx.save();

    ctx.translate((x + w / 2), (y + h / 2));
    ctx.rotate(rot);
    ctx.translate(-(x + w / 2), -(y + h / 2));

    ctx.translate(x, y);

    a = 0;
    b = (1 / 4) * h;
    c = (2 / 3) * w;
    d = (3 / 4) * h;
    e = w;
    f = (1 / 2) * h;
    g = h;

    ctx.beginPath();
    ctx.moveTo(a, b);
    ctx.lineTo(c, b);
    ctx.lineTo(c, 0);
    ctx.lineTo(e, f);
    ctx.lineTo(c, g);
    ctx.lineTo(c, d);
    ctx.lineTo(a, d);
    ctx.closePath();
    ctx.fill();

    ctx.restore();
}

index.html

<canvas id="canvas" height="300" width="500"></canvas>
<script src="drawArrow.js"></script>
<script>
  ctx = document.getElementById("canvas").getContext("2d");
  ticker = 0
  function call(){
    window.webkitRequestAnimationFrame(call);
    ctx.clearRect(0, 0, 300, 300)
    drawArrow(100, 100, 60, 20, ticker);
    ticker += 0.05;
  }
  call();
</script>