html5 캔버스 선폭 공백

Question

html5 캔버스를 페인트처럼 그리기 위해 사용합니다. 얇은 브러시 크기로 페인트하면 멋지고 부드럽지만 브러시 크기를 늘리면 공백이 생깁니다.

code: http://jsfiddle.net/L2g43q1g/ 

얇은 브러시 크기 결과 : http://postimg.org/image/eyxenntth/

큰 브러시 크기 결과 : 나는 당신이 당신의 context.closePath 순서를 반대로 할 필요가 있다고 생각 http://postimg.org/image/60agxczf9/

Answer 1

()와 컨텍스트 .stroke() 및 context.lineJoin = "round"를 추가하십시오.

업데이트 됨 획 기능 :

function stroke(mouseX, mouseY) { 
    context.beginPath(); 
    context.lineJoin = "round"; 
    context.lineWidth = 10; //1 = thin line without spaces, 10 = big line with spaces.. 
    context.moveTo(prevMouseX, prevMouseY); 
    context.lineTo(mouseX, mouseY); 
    context.closePath(); 
    context.stroke(); 


    prevMouseX = mouseX; 
    prevMouseY = mouseY; 
}