캔버스에 서서 마우스를 클릭하여 드로잉

Question

캔버스에 채워진 (또는 채워지지 않은) 서클을 mouseclick에 그려야 겠지만 코드가 올바르게 작동하지 않을 수 있습니다. 거의 모든 것을 시도했습니다! 내 문제는 내가 그 부분에 대해 꽤 확신에도 불구하고, function draw(e)으로 생각

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 
    }; 
} 

:

<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> 

내 현재 스크립트 :

이

내 HTML입니다. 여기

내가 포크와 작동 예를 만드는 당신의 바이올린 업데이트 한 jsFiddle

Answer 1

수 있습니다 : - 다른 사람에 의해 명시된 바와 같이 - 잘못 이벤트를 참조 외에 http://jsfiddle.net/ankr/ds9s7/161/

을 당신은 또한 시작하거나 경로를 끝나지 않았다 그릴 때. 추가 context.beginPath() 및 context.fill() 통화 여기

이벤트 (그릴`에`등 (예) 그릴`에서`onclick`의 변화로 정확한 변화를 지적하는 편리한겠습니까 관련 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 
    }; 
}