1ctx = document.getElementById("c").getContext("2d");
2ctx.beginPath();
3canvas_arrow(ctx, 10, 30, 200, 150);
4canvas_arrow(ctx, 100, 200, 400, 50);
5canvas_arrow(ctx, 200, 30, 10, 150);
6canvas_arrow(ctx, 400, 200, 100, 50);
7ctx.stroke();
8
9
10function canvas_arrow(context, fromx, fromy, tox, toy) {
11  var headlen = 10; // length of head in pixels
12  var dx = tox - fromx;
13  var dy = toy - fromy;
14  var angle = Math.atan2(dy, dx);
15  context.moveTo(fromx, fromy);
16  context.lineTo(tox, toy);
17  context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
18  context.moveTo(tox, toy);
19  context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
20}