Draw smoother paths in html canvas

Question

I have a fiddle Here.

When user presses the mouse (mousedown) and then moves the mouse without releasing the mouse I draw the path followed by the mouse. But whe the mouse is moved very fast the drawn path is not smoother anymore.

// this part is drawing the path

            ctx1.save();
            ctx1.beginPath();
            ctx1.moveTo(loc.x, loc.y);
            ctx1.lineTo(loc.x + dX, loc.y + dY);
            ctx1.stroke();

Is there any way to get smoother path on mouse move?

Please ignore the bad programming style for now.

Any help will be great. Thank you

Answer 1

I changed your d.onmousemove to look like this:

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

Answer 2

Try this one:

JS FIDDLE

I have already done some work on it, so now it's time to help you. The main thing behind the code is keep track of the mouse pointer and capture it.

You have to draaw only when mouse is down and moving. For this purpose do:

var drawing =false;//initially

After this whenever mouse left button is pressed keep track as:

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

});

When the user is moving with the mouse left button pressed you keep track of mouse pointer and draw accordingly. It will draw the line from the lastmost point to the current mouse pointer so it will take care of smooth drawing i.e. continuous path.

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

Finally when the mouse button being pressed is released, simply reverse the condition mandatory to draw line.

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

Code is explained here and for a demo please visit the fiddle I mentioned earlier.

Happy Coding!