JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id='pic1'>1</div> <div id='pic2'>2</div>
<div class="photocontentsarea">
    <a HREF="#">pic1</a><br />
    <a HREF="#">pic2</a><br />
</div>
<canvas width=250 height=250 id='arrows'></canvas>

CSS

#pic1{
    position:absolute;
    width:100px;
    height:100px;
    top:50px;
    left:140px;
    background:green;
    text-align:center;
}
#pic2{
    position:absolute;
    width:50px;
    height:50px;
    top:150px;
    left:40px;
    background:blue;
    text-align:center;
}
canvas{
    position:absolute;
    left:0;
    top:10px;
    width:250px;
    height:250px;
    z-index:1
}
.photocontentsarea{
    z-index:2;
    position:relative;
}

JavaScript

$(document).on('click','a',function(){
var c = document.getElementById("arrows");
var ctx = c.getContext("2d");
var start = arrowcoords(this);
var end = arrowcoords(document.getElementById($(this).html()));
canvas_arrow(ctx,start.left,start.top,end.left,end.top);
});

function arrowcoords(el){
   var position = $(el).position();
   position.left+=$(el).width()/2;
   position.top+=$(el).height()/2;
   return position;
}

function canvas_arrow(context, fromx, fromy, tox, toy){
    var headlen = 10;   // length of head in pixels
    var angle = Math.atan2(toy-fromy,tox-fromx);
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.stroke();
    context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
    context.stroke();
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
    context.stroke();
}