CANVAS - JS - закругленный и плавный путь

Question

Я работаю над созданием canvas с html и js/jquery. Но у меня проблема с дорогой, она не закругленная, слишком много наложения. Вот скрипка, чтобы вы могли понять мою проблему. И сразу после кода.

fiddle

var $canvas = $("#mainCanvas"); 
var context = $canvas[0].getContext("2d"); 
/* ------ CANVAS ------ */ 

//On mouse events on the canvas: 
$canvas.mousedown(function(e) { 
//On mousedown, storing the starting coordinates and enable the drawing. 
lastEvent = e; //saving the starting coordinates 
mouseDown = true; //drawing enabled 
}).mousemove(function(e) { 
//On mousemove draws the path, change the style, stroke the line, update the coordinates. 
if (mouseDown) { 
context.beginPath(); //begin the path 
context.moveTo(lastEvent.offsetX, lastEvent.offsetY); //starting coordinates 
context.lineTo(e.offsetX, e.offsetY); 
context.lineWidth = $("#thickness").val(); 
context.strokeStyle = color; //color of path 
context.stroke(); //draw the path 
lastEvent = e; //replacing the coordinates 
} 
}).mouseup(function() { 
//On mouseup drawing disabled 
mouseDown = false; 
}).mouseleave(function(){ 
//If the mouse leaves the canvas, stop drawing. BUG FIXING 
$canvas.mouseup(); 
}); 

Решение

context.lineCap = 'round'; 

Особая благодарность Стейси Бернса

Answer 1

Это происходит из атрибута lineCap. Установите его вокруг, и вы получите гладкий путь:

context.lineCap = 'round'; 

fiddle