var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext('2d');
arcToTest(context,150,150,650,150,650,650,300);
function arcToTest(cxt,x0,y0,x1,y1,x2,y2,r){
cxt.beginPath();
cxt.moveTo(x0,y0);
cxt.arcTo(x1,y1,x2,y2,r);
cxt.lineWidth = 6;
cxt.strokeStyle = 'red';
cxt.stroke();
cxt.beginPath();
cxt.moveTo(x0,y0);
cxt.lineTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.lineWidth = 2;
cxt.strokeStyle = 'gray';
cxt.stroke();
}