javascript - Drawing a series of lines doesn't obey lineJoin='rounded' -

i have drawing application. track drawing on canvas , render using so:

canvas.moveto(x[0]-1, y[0]); for(var i=0;i<x.length;i++) {   canvas.lineto(x[i], y[i]);   canvas.moveto(x[i], y[i]); } 

in way, "stroke" of mouse, results in series of lines being drawn in order of visit canvas mouse.

however, doesn't render right. looks choppy , not "round" have linejoin set to. can solve instead creating closing, stroking, , creating new path @ each moveto in loop. horribly slow however.

why lines end drawing in blocky , weird manner?

because each line "continues" @ moveto, lines never "joined". considered 1 big line. solution making render smoothly set linecap property of canvas context "round".

this still isn't quite same though reason , "choppiness" around corners seen, not extremely obvious before