Нарисуйте более плавные пути на холсте html

Я изменил ваш d.onmousemove, чтобы он выглядел так:

d.onmousemove = function(event) {
    var loc = getMousePos(c, event);
    // nothing is using dX and dY, removed
    if (drawState) {
        if (drawProps.tool === "pencil") {
            ctx1.save();
            ctx1.beginPath();
            ctx1.moveTo(lastX, lastY);// was loc.x and loc.y
            ctx1.lineTo(loc.x, loc.y);// was loc.x + dX and loc.y + dY
            ctx1.stroke();
        } else if (drawProps.tool === "line") {
            ctx.clearRect(0, 0, c.width, c.height);
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(loc.x, loc.y);
            ctx.stroke();
            ctx.closePath();
            ctx.save();
        }
    }
    // Moved to after the if instead of before it
    lastX = loc.x;
    lastY = loc.y;
};

Попробуй это:

JS FIDDLE

Я уже немного поработал над этим, так что пришло время помочь вам. Главное в коде — отслеживать указатель мыши и захватывать его.

Вы должны рисовать только тогда, когда мышь опущена и движется. Для этого сделайте:

var drawing =false;//initially

После этого всякий раз, когда нажимается левая кнопка мыши, отслеживайте как:

canvas.on('mousedown',function(e){
        e.preventDefault();
        drawing = true;
        prev.x = e.pageX;
        prev.y = e.pageY;

});

Когда пользователь движется с нажатой левой кнопкой мыши, вы отслеживаете указатель мыши и соответственно рисуете. Он будет рисовать линию от самой последней точки до текущего указателя мыши, поэтому он позаботится о плавном рисовании, то есть о непрерывном пути.

doc.on('mousemove',function(e){
        // Draw a line for the current user's movement
        if(drawing){

            drawLine(prev.x, prev.y, e.pageX, e.pageY);

            prev.x = e.pageX;
            prev.y = e.pageY;
        }
    });

//function drawing line with color and width set as variables, feel free to change
function drawLine(fromx, fromy, tox, toy){
        ctx.beginPath();
        ctx.lineWidth = globalBrushSize;
        ctx.strokeStyle = globalBrushColor;
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
    }

Наконец, когда нажатая кнопка мыши отпущена, просто измените условие, обязательное для рисования линии.

doc.bind('mouseup mouseleave',function(){
        drawing = false;
    });

Код объясняется здесь, а для демонстрации посетите скрипку, о которой я упоминал ранее.

Удачного кодирования!