html5 canvas linewidth spaces

Question

i use html5 canvas for drawing like a paint my problem if i paint with thin brush size this is nice and smooth but if i increase brush size i get line with spaces.

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

Thin brush size result: http://postimg.org/image/eyxenntth/

Big brush size result: http://postimg.org/image/60agxczf9/

Answer 1

I think you need to reverse the order of you context.closePath() and context.stroke() and also add context.lineJoin = "round"

Updated stroke function:

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