Drawing arrows

In this section, we present a function that draws arrows in a canvas.

You may find multiple implementations on the Web for drawing arrows in a canvas, but the one we are presenting has the advantage of being rather simple and enables you to set the color and line width of the arrows.

Examples

Example #1:

// Adapted from : https://stackoverflow.com/questions/808826/draw-arrow-on-canvas-tag

function drawArrow(ctx, fromx, fromy, tox, toy, arrowWidth, color){

    //variables to be used when creating the arrow

    var headlen = 10;

    var angle = Math.atan2(toy-fromy,tox-fromx);

    ctx.save();

    ctx.strokeStyle = color;

    //starting path of the arrow from the start square to the end square

    //and drawing the stroke

    ctx.beginPath();

    ctx.moveTo(fromx, fromy);

    ctx.lineTo(tox, toy);

    ctx.lineWidth = arrowWidth;

    ctx.stroke();

    //starting a new path from the head of the arrow to one of the sides of

    //the point

    ctx.beginPath();

    ctx.moveTo(tox, toy);

    ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),

               toy-headlen*Math.sin(angle-Math.PI/7));

    //path from the side point of the arrow, to the other side point

    ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),

               toy-headlen*Math.sin(angle+Math.PI/7));

    //path from the side point back to the tip of the arrow, and then

    //again to the opposite side point

    ctx.lineTo(tox, toy);

    ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),

               toy-headlen*Math.sin(angle-Math.PI/7));

    //draws the paths created above

    ctx.stroke();

    ctx.restore();

}

Explanations:

• An arrow is made of one line (the arrow body) and three connected lines (the arrow head). 

• As we modify some context properties in this function, we call save() and restore() at the beginning and at the end of the function.

• This function can be improved in many ways: adding shadows, using fill() instead of stroke(), which gives strange results when the width is too big, etc.

Example #2