Всем привет! хочелось бы унать как нарисовать дугу в js на canvas вот как на скриншоте пример 2)

Не силен в js это для меня новый язык который я изучаю, в других языках мне легко удавалось нарисовать дугу которая идет от и до, тут же я столкнулся со сложностями, тупа рисует окружную дугу которая либо увеличивается либо уменьшается и рисуется с окружностью, мне нужно нарисовать дугу как на рисунке пример 2) и так что бы имела начало и конец. я нашел пример -
ctx.beginPath();
ctx.moveTo(30,250);
ctx.arcTo(30,0,50 , 50,50);
ctx.stroke(); но это что то не то, я понимаю что можно нарисовать 2 половинки соединить и получится дуга как нарисунке 2 но этот метод мне тоже не подойдет.