Рисование круга в холсте на mouseclick

Question

Я хочу нарисовать заполненный (или не заполненный) круг в холсте на mouseclick, но я не могу заставить свой код работать правильно, я пробовал почти все!

Это мой HTML:

<div id="images"></div> 
<canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="250" height="250" onclick="draw(e)"></canvas> 

и мой текущий сценарий:

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

function createImageOnCanvas(imageId) { 
    canvas.style.display = "block"; 
    document.getElementById("images").style.overflowY = "hidden"; 
    var img = new Image(300, 300); 
    img.src = document.getElementById(imageId).src; 
    context.drawImage(img, (0), (0)); //onload.... 
} 

function draw(e) { 
    var pos = getMousePos(canvas, e); 
    posx = pos.x; 
    posy = pos.y; 
    context.fillStyle = "#000000"; 
    context.arc(posx, posy, 50, 0, 2 * Math.PI); 
} 

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
} 

Я думаю, что моя проблема с function draw(e), хотя я чувствую себя довольно уверенно об этой части.

Вот jsFiddle

Answer 1

Я раздвоенный и обновил свою скрипку, чтобы сделать рабочий пример: http://jsfiddle.net/ankr/ds9s7/161/

Кроме того, ссылки на событии неправильно - как указано на других - вы также не стали ни закончить путь при рисовании. Добавлены context.beginPath() и context.fill() звонки

Вот соответствующий код JS

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

function draw(e) { 
    var pos = getMousePos(canvas, e); 
    posx = pos.x; 
    posy = pos.y; 
    context.fillStyle = "#000000"; 
    context.beginPath(); 
    context.arc(posx, posy, 50, 0, 2*Math.PI); 
    context.fill(); 
} 

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
}