Рисование дуги на изображении внутри холста

Question

Я пытаюсь закрепить и отобразить очень большое изображение внутри div. canvas.

Использование основных вычислений и drawImage Мне удалось закрепить изображение вокруг пикселя, который я хочу, и отобразить обрезанное изображение.

An example is here on JSFiddle (displaying image arround eye of the person)

Я хотел бы добавить дугу, которая будет над изображением вокруг пикселя (sx, sy пикселя я использую в примере в drawImage), как я должен настроить координаты?

var canvas = document.getElementById('test-canvas'); 
    canvas.width = 500; 
    canvas.height = 285; 
    var context = canvas.getContext('2d'); 

var imageObj = new Image(); 

imageObj.onload = function() { 
    //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 
    context.drawImage(imageObj, 1324 - 250, 1228 - 142.5, 500, 285, 0, 0, 500, 285); 
}; 


imageObj.src = "http://upload.wikimedia.org/wikipedia/en/b/b3/Edvard_Munch_-_Self-Portrait_-_Google_Art_Project.jpg"; 

Answer 1

дуга является частью пути, который может быть либо заполненной или инсульт. Для того, чтобы получить нужный результат, вам необходимо перейти к точке на вашем круге *, создать дугу, а затем использовать stroke() (fiddle):

function strokeCircle(ctx, midx, midy, radius){ 
    ctx.moveTo(midx + radius, midy); 
    ctx.arc(midx, midy, radius, 0, 2 * Math.PI, false); 
    ctx.stroke(); 
} 

imageObj.onload = function() { 
    context.drawImage(imageObj, 1324 - 250, 1228 - 142.5, 500, 285, 0, 0, 500, 285); 
    strokeCircle(context, 250, 142.5, 30); 
}; 

_{* Правильная координат зависит от ваших полярных координат, используемых для круга. Если вы рисуете от 0 до Math.PI, вам нужно начать с самой правой точки.}