ctx = document.getElementById("illustration").getContext("2d");
ctx.beginPath();
canvas_arrow(ctx, 200, 200, 100, 50);
ctx.stroke();


figure = new Image();
//figure.src = 'figure.png';
figure.src = "{% static 'Part1_DOSE/figure.PNG'%}";
//ctx.drawImage(figure, 100, 100);


figure.onload = function(){
    //Draw the image onto the canvas.
    ctx.drawImage(figure, 100, 100);
}

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