Edit in JSFiddle

var arc = function(ctx, a, b, o, r) {
    var t1 = Math.atan2(a[1], a[0]);
    var t2 = Math.atan2(b[1], b[0]);
    
    ctx.beginPath();
    ctx.arc(o[0], o[1], r, t1, t2);
    ctx.stroke();
};

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(255,0,0)";

var cntpt = [100, 80];
var ancpt = [0, -1];
var varpt = [1, 0];
var r = 60;

ctx.fillRect(cntpt[0] + ancpt[0] * r - 2, cntpt[1] + ancpt[1] * r - 2, 4,4);
ctx.fillRect(cntpt[0] + varpt[0] * r - 2, cntpt[1] + varpt[1] * r - 2, 4,4);

arc(ctx, ancpt, varpt, cntpt, r);

var animate = function(i) {
    ctx.clearRect(0,0, 200,200);
    
    var STEPS = 100;
    var t = i * Math.PI * 2 / STEPS;
    varpt = [Math.cos(t), Math.sin(t)];
    
    arc(ctx, ancpt, varpt, cntpt, r);
    setTimeout(function(){animate((i+1) % STEPS)}, 30);
}

animate(0);

<canvas id="canvas" width=200 height=200></canvas>

canvas {
    border-style: solid;
    border-color: black;
    border-width: 1px;
}