Рисование кривых головок стрелок в HTML5 Canvas

Я пытаюсь нарисовать 3 стрелки ниже. Я могу правильно нарисовать верхнюю стрелку, но не могу правильно нарисовать 2 другие стрелки. Я использую HTML5 Canvas для рисования этих стрелок.

Проблема возникает с моими вызовами arcTo. По какой-то причине я не могу добиться правильной кривой. Может быть, я должен использовать кривую Безье? Может ли кто-нибудь сказать мне, какие функции HTML5/Javascript я использую для создания вышеуказанных головок стрел?

Можете ли вы предоставить пример того, как добиться вышеуказанных головок стрел?

Вот JSFiddle, чтобы показать, что происходит не так: http://jsfiddle.net/hJX8X/